让一个元素水平垂直居中的几种方法

1.方法一——margin负

div.box{
weight:200px;
height:400px;
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的左外边距、上外边距为宽高的负1/2-->
margin-left:-100px;
margin-top:-200px;
}

优点：兼容性好; 缺点:必须已知元素的宽高；

2.方法二——translate负50%

div.box{
weight:200px;
height:400px;
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->
transform:translate(-50%,-50%);

}

注意：该方法使用css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

3.方法三——margin:auto

div.box{
weight:200px;
height:400px;
position:absolute;
<!--设置元素的定位位置，距离上、下、左、右都为0-->
left:0;
right:0;
top:0;
bottom:0;
<!--必须设置元素的margin样式值为 auto-->
margin:auto;

}

优点：兼容性较好；缺点:不支持IE7以下的浏览器

4.方法四——flex

div.box{
            width:100%;
            height:20rem;
            background: green;
            display: -webkit-flex; /* 新版本语法: Chrome 21+ */
            display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
            display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
            display: -moz-box;     /* 老版本语法: Firefox (buggy) */
            display: -ms-flexbox;  /* 混合版本语法: IE 10 */
            flex-direction: row ;
            /*垂直居中*//*老版本语法*/
            -webkit-box-align: center;
            -moz-box-align: center;
             /*混合版本语法*/
             /*新版本语法*/
             -webkit-align-items: center;
             -moz-align-items: center;
             align-items: center;
             /*水平居中*/ /*老版本语法*/
             -webkit-box-pack: center;
             -moz-box-pack: center;
             /*混合版本语法*/
             /*新版本语法*/
             -webkit-justify-content: center;
             -moz-justify-content: center;
             justify-content: center;
        }

        .box .item{
            background: pink;
            flex-shrink:0; /* default 1 */
            -webkit-box-flex: 1;  /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-flex:1;     /* OLD - Firefox 19- */
            -webkit-flex: 1;      /* Chrome */
            -ms-flex: 1 ;          /* IE 10 */
            flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }
       

注意：缺点:兼容性不好

5.方法五——利用table-cell

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

/*** table-cell middle center组合使用 ***/
        .cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 240px;
            height: 180px;
            border:1px solid #666;
        }

  <div class="cell">
        <p>我爱你</p><p>亲爱的祖国</p>
    </div>

注意：

1.table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。

2.设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性。

原文地址：https://www.cnblogs.com/imelemon/p/8473096.html