将一个div水平垂直居中的6种方法

拼搏现实的明天。 2022-05-24 07:08 262阅读 0赞

**方案一：**

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，

兼容性：,IE7及之前版本不支持

div\{  
            width: 200px;  
            height: 200px;  
            background: green;  
            position:absolute;  
            left:0;  
            top: 0;  
            bottom: 0;  
            right: 0;  
            margin: auto;

**方案二：**

div绝对定位水平垂直居中【margin 负间距】     这或许是当前最流行的使用方法。

div\{  
            width:200px;  
            height: 200px;  
            background:green;  
            position: absolute;  
            left:50%;  
            top:50%;  
            margin-left:-100px;  
            margin-top:-100px;

**方案三：**

div绝对定位水平垂直居中【Transforms 变形】

兼容性：IE8不支持；

div\{  
            width: 200px;  
            height: 200px;  
            background: green;  
            position:absolute;  
            left:50%;    /\* 定位父级的50% \*/  
            top:50%;  
            transform: translate(-50%,-50%); /\*自己的50% \*/

**方案四：**

css不定宽高水平垂直居中

.box\{  
  
             height:600px;  
             display:flex;  
             justify-content:center;  
             align-items:center;

/\* aa只要三句话就可以实现不定宽高水平垂直居中。 \*/

.box>div\{

background: green;  
            width: 200px;  
            height: 200px;  
        \}

### **方案五：** ###

将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

`<` `p`  `class="outerBox tableCell">`

`  ` `</` `p` `><` `p`  `class="ok">`

`    ` `</` `p` `><` `p`  `class="innerBox">tableCell</` `p` `>`

`  ` `<` `p` `></` `p` `>`

`<` `p` `></` `p` `>`

`/*`

`table-cell实现居中`

`将父盒子设置为table-cell元素，设置`

`text-align:center,vertical-align: middle;`

`子盒子设置为inline-block元素`

`*/`

`.tableCell{`

`  ` `display: table;`

`}`

`.tableCell .ok{`

`  ` `display: table-cell;`

`  ` `text-align: center;`

`  ` `vertical-align: middle;`

`}`

`.tableCell .innerBox{`

`  ` `display: inline-block;`

`}`

### **方案六：** ###

### 对子盒子实现绝对定位，利用calc计算位置 ###

calc 
 
 
 
/\*绝对定位，clac计算位置\*/ 
.calc\{ 
  position: relative; 
\} 
.calc .innerBox\{ 
  position: absolute; 
  left:-webkit-calc((500px - 200px)/2); 
  top:-webkit-calc((120px - 50px)/2); 
  left:-moz-calc((500px - 200px)/2); 
  top:-moz-calc((120px - 50px)/2); 
  left:calc((500px - 200px)/2); 
  top:calc((120px - 50px)/2); 
\}

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220524/8fee1e5fceb547ada53ae3434b69702e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220524/fcc4c70b38ef4f018430b269a67f0980.png