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

工作中经常用到这种需求，现在来整理 一下，方便以后在合适的场景灵活运用可用的方法布局。

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>

注意：

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

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

6.方法六——calc()计算

.wrap {
            width: 400px;
            height: 400px;
            background-color: #ccc;
        }
        .wrap .con {
            /*利用CSS3的calc() ，它的用法类似于函数，能够给元素设置动态的值：*/
            /*（父级的宽度 - 自身的宽度）的一半当做padding的值*/
            padding: -webkit-calc((100% - 100px) / 2);
            padding: -moz-calc((100% - 100px) / 2);
            padding: -ms-calc((100% - 100px) / 2);
            padding: calc((100% - 100px) / 2);            
            /* width: 100px;
            height: 100px; */
            background-color: pink;
            color: #fff;
            /*背景只显示内容区域*/
            background-clip: content-box;
        }

  <div class="wrap">
        <div class="con">2018旺年大吉</div>
    </div>