说说各种居中

单行居中

    div{

        height: 26px;

        line-height: 26px;

        overflow: hidden;

        text-align:center;

    }

1. 同时支持块级和内联极元素

2. 只能支持单行垂直居中，并且不支持标签

多行居中

div{

    padding: 10px 0;

     text-align:center;

}

1. 同时支持块级和内联极元素

2. 支持非文本标签，但不能设定容器的高度

绝对定位居中

    div{

        margin: auto;

        position: absolute;

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        /**可以设定高度、宽度**/

    }

1.毫无疑问，绝对定位居中是本人最喜欢、使用次数最多的居中方式。通过设定position为absolute，将使div脱离文档流，left、top、right、bottom设置为0，使目标盒填充其父元素的所有可用空间，父元素一般为body，或者position设置为relative的容器。设置高度或宽度后，margin： auto会促使该块在水平方向和垂直方向居中。

2.宽度高度支持百分比%属性值和min-/max-属性，并且必须显式生命高度

负外边距居中

div{

    width:100px;

    height:100px;

    padding:20px;

    position:absolute;

    top:50%;

    left:50%;

    /**重点：需要明确知道高度和宽度**/

    margin-left: -60px;//(width+padding)/2

    margin-top:-60px;//(height+padding)/2

}

1.使用absolute定位，距离左边50%，上边50%，再通过设置margin为负值，扣去该块本身占有的宽高。另外，需要明确指定宽度和高度！

变形居中

div{

    width: 50%;

    position: absolute;

    left: 50%;

    top: 50%;

    /**重点:向上偏移本身高度和宽度的一半**/

    transform: translate(-50%,-50%);  

}

1.通过translate设置块水平和垂直方向各移动自身高度宽度的50%距离。

2.浏览器需支持CSS3

单元格居中

div{

    display: table-cell;

    height: 300px;

    vertical-align: middle;

    text-align: center;

}

1.通过表格单元格来实现居中也是一种广泛使用的方式，这也是早期web使用table来布局的一个主要原因。另外，使用单元格来实现垂直居中可以支持多元素同时居中！！！

Flexbox

 <div class="container">

    <div class="child">

      CSS3非常简单的居中方式！

    </div>

  </div>

  .container {

      display: flex;

      height: 300px;

    }

    .child {

        margin: auto;

    }

1.Flexbox是CSS3新增布局属性，不但可以非常简单地实现居中布局，在实现其他布局方式时也带来了很大的帮助，比如多栏布局。