实现div水平垂直居中你的几种方式

使div水平垂直居中的几种方式：

1、第一种

父div高度宽度固定，相对定位；子div高度宽度固定，绝对定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;实现水平垂直居中。

缺点就是子div脱离文档流

.my-div{
    border:1px solid red;
    width:400px;
    height:300px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-150px;
    // transform: translate(-50%, -50%); // 此效果相当于 margin-left:-200px和 margin-top:-150px
}


    

        父div高度宽度固定，相对定位；子div高度宽度固定，绝对定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;实现水平垂直居中。
    
    

        我是子div2
    

2、第二种

父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位，使用top:50%;left:50%; transform: translate(-50%, -50%);实现水平垂直居中。

缺点就是子div脱离文档流

.my-div{
    border:1px solid red;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}


    

       父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位，使用top:50%;left:50%; transform: translate(-50%, -50%);实现水平垂直居中
    
    

        我是子div2
    

3、第三种

父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位；使用 left:0;top: 0;bottom: 0;right: 0;margin: auto;实现水平垂直居中。

缺点就是子div脱离文档流

.my-div{
    width: 400px;
    height: 200px;
    border:1px solid red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}


    

        父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位；使用 left:0;top: 0;bottom: 0;right: 0;margin: auto;实现水平垂直居中
    
    

        我是子div2
    

4、第四种

父div高度宽度固定；子div高度宽度固定/不固定；使用flex布局实现水平垂直居中。子div未脱离文档流，不管子div高度宽度是否固定，都可以实现水平居中

缺点就是ie10+才支持使用flex布局实现水平垂直居中

.box{
    width:800px;
    height:600px;
    border:1px solid blue;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
}
.my-div{
    border:1px solid red;
}  


    

        父div高度宽度固定；子div高度宽度固定/不固定，使用flex布局实现水平垂直居中。子div未脱离文档流
    

5、第五种

父div高度宽度固定,相对定位；子div高度宽度固定，绝对定位，使用calc函数动态计算实现水平垂直居中。

缺点是子div未脱离文档流

.box{
    width: 800px;
    height: 600px;
    border: 1px solid blue;
    position: relative;
}
.my-div{
    position: absolute;
    width: 400px;
    height: 200px;
    left:-webkit-calc((800px - 400px)/2);
    top:-webkit-calc((600px - 200px)/2);
    left:-moz-calc((800px - 400px)/2);
    top:-moz-calc((600px - 200px)/2);
    left:calc((800px - 400px)/2);
    top:calc((600px - 200px)/2);
    border:1px solid red;
}　


    

        父div高度宽度固定,相对定位；子div高度宽度固定，绝对定位，使用calc函数动态计算实现水平垂直居中。 子div未脱离文档流
    

6、第六种

父div高度固定/不固定，子div不可设置高度宽度，实现水平垂直居中，此方式主要针对于文字内容的水平垂直居中。（注：去掉子div或用p代替子div一样可以使文字内容水平垂直居中）

 .box {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
     width: 800px;
     height: 600px;
     border:1px solid #666;
   }
   .my-div{
     /*width: 400px;*/
     /*height: 200px;*/
     border: 1px solid blue;
   }


 

   父div高度固定/不固定，子div不可设置高度宽度，实现水平垂直居中，此方式主要针对于文字内容的水平垂直居中。（注：去掉子div或用p代替子div一样可以使文字内容水平垂直居中）