CSS垂直居中的方法總結(jié)：

1.利用padding垂直居中(line-height用于單行文本居中)

**不需要設(shè)置高度 ***

.parent {

  border: 1px solid red;

  padding: 15px 0;

}

示例

2.利用table垂直居中（兼容IE）

**需要設(shè)置父元素高度 ***

    <table>

      <td>

      <div class="child">

          table垂直居中table垂直居中table垂直居中table垂直居中

      </div>

    </td>

    </table>

示例

3.利用外部包裹垂直居中

**需要設(shè)置父元素高度 ***

  <div class="parent">

    <span class=before></span>

    <div class="child">

      外部包裹

    </div>

    <span class=after></span>

  </div>

用偽元素優(yōu)化一下：

  <div class="parent">

    <div class="child">

      外部包裹

    </div>

  </div>

.parent::after{

  content: '';

  clear:both;

  display: inline-block;

  height: 100%;

  vertical-align: middle;

}

示例

4.div設(shè)置table垂直居中

**需要設(shè)置父元素高度 ***

<div class="table">

      <div class="td">

        <div class="child">

        div設(shè)置table

        </div>

    </div>

示例

5.負(fù)margin垂直居中(兼容IE)

**絕對(duì)定位 ***

**需要設(shè)置父子元素高度 ***

**居中內(nèi)容過(guò)多會(huì)出現(xiàn)溢出 ***

.child{

  border: 1px solid green;

  width: 300px;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -150px;

  height: 100px;

  margin-top: -50px;

}

示例

6.transform垂直居中

**絕對(duì)定位 ***

**需要設(shè)置父元素高度 ***

.child{

  border: 1px solid green;

  position: absolute;

  top: 50%;

  left: 50%;

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

}

示例

7.margin:auto垂直居中(兼容IE)

**絕對(duì)定位 ***

**需要設(shè)置父子元素高度 ***

**居中內(nèi)容過(guò)多會(huì)出現(xiàn)溢出 ***

.child{

  border: 1px solid green;

  position: absolute;

  width: 300px;

  height: 200px;

  margin: auto;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}

示例

8.flex垂直居中(除IE外都兼容)

**CSS3解決方案 ***

**需要設(shè)置父元素高度 ***

**真簡(jiǎn)單~ ***

.parent{

  height: 600px;

  border: 3px solid red;

  display: flex;

  justify-content: center;

  align-items: center;

}

示例