如何将一个div水平垂直居中？6种方法做推荐

wdbgqq 2021-08-20 原文

方案一：

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

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

 1 div{
 2             width: 200px;
 3             height: 200px;
 4             background: green;
 5             position:absolute;
 6             left:0;
 7             top: 0;
 8             bottom: 0;
 9             right: 0;
10             margin: auto;
11         }

方案二：

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

 1 div{
 2             width:200px;
 3             height: 200px;
 4             background:green;
 5             position: absolute;
 6             left:50%;
 7             top:50%;
 8             margin-left:-100px;
 9             margin-top:-100px;
10         }

方案三：

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

兼容性：IE8不支持；

1 div{
2             width: 200px;
3             height: 200px;
4             background: green;
5             position:absolute;
6             left:50%;    /* 定位父级的50% */
7             top:50%;
8             transform: translate(-50%,-50%); /*自己的50% */
9         }

方案四：

css不定宽高水平垂直居中

 1 　.box{
 2 
 3              height:600px;
 4              display:flex;
 5              justify-content:center;
 6              align-items:center;
 7                /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
 8         }
 9         .box>div{
10             background: green;
11             width: 200px;
12             height: 200px;
13         }

方案五：

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

 1 <p class="outerBox tableCell">
 2   </p><p class="ok">
 3     </p><p class="innerBox">tableCell</p>
 4   <p></p>
 5 <p></p>
 6  
 7  
 8 /*
 9 table-cell实现居中
10 将父盒子设置为table-cell元素，设置
11 text-align:center,vertical-align: middle;
12 子盒子设置为inline-block元素
13 */
14 .tableCell{
15   display: table;
16 }
17 .tableCell .ok{
18   display: table-cell;
19   text-align: center;
20   vertical-align: middle;
21 }
22 .tableCell .innerBox{
23   display: inline-block;
24 }

方案六：

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

 1 <p class="outerBox calc">
 2     </p><p class="innerBox">calc</p>
 3 <p></p>
 4 
 5 
 6 /*绝对定位，clac计算位置*/
 7 .calc{
 8   position: relative;
 9 }
10 .calc .innerBox{
11   position: absolute;
12   left:-webkit-calc((500px - 200px)/2);
13   top:-webkit-calc((120px - 50px)/2);
14   left:-moz-calc((500px - 200px)/2);
15   top:-moz-calc((120px - 50px)/2);
16   left:calc((500px - 200px)/2);
17   top:calc((120px - 50px)/2);
18 }