6种div水平竖直居中的方式

阳光穿透心脏的1/2处 2022-03-11 21:18 171阅读 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实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td> <code>&lt;</code><code>p</code>&nbsp;<code>class="outerBox tableCell"&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>p</code><code>&gt;&lt;</code><code>p</code>&nbsp;<code>class="ok"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>p</code><code>&gt;&lt;</code><code>p</code>&nbsp;<code>class="innerBox"&gt;tableCell&lt;/</code><code>p</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;</code><code>p</code><code>&gt;&lt;/</code><code>p</code><code>&gt;</code> &nbsp; &nbsp; <code>/*</code> <code>table-cell实现居中</code> <code>将父盒子设置为table-cell元素，设置</code> <code>text-align:center,vertical-align: middle;</code> <code>子盒子设置为inline-block元素</code> <code>*/</code> <code>.tableCell{ </code> <code>&nbsp;&nbsp;</code><code>display: table;</code> <code>}</code> <code>.tableCell .ok{ </code> <code>&nbsp;&nbsp;</code><code>display: table-cell;</code> <code>&nbsp;&nbsp;</code><code>text-align: center;</code> <code>&nbsp;&nbsp;</code><code>vertical-align: middle;</code> <code>}</code> <code>.tableCell .innerBox{ </code> <code>&nbsp;&nbsp;</code><code>display: inline-block;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

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

### 对子盒子实现绝对定位，利用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);
 }