div垂直居中一直是css布局中的热点，下面归纳总结一下div垂直居中的几种办法。

table元素自带属性

这里有必要介绍一下table元素的属性，在css没有出现之前，HTMLtable元素常常用于页面布局。这种办法在HTML4之后便不再推荐使用。

  • HTML代码:

    1
    2
    3
    4
    5
    6
    7
    <table class="parent">
      <tr>
        <td class="child">
       这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.这是一串文字.
        </td>
      </tr>
    </table>

  • CSS代码:

    1
    2
    3
    4
    5
    6
    7
    .parent{
      border: 1px solid red;
      height: 400px;
    }
    .child{
      border: 1px solid black;
    }

  • 效果如下:
    table垂直居中

div装成table

这里就不赘述table元素的属性了，直接上代码。

  • HTML代码：

    1
    2
    3
    4
    5
    6
    7
    <div class="table">
      <div class="td">
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
      </div>
    </div>

  • CSS代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    div.table{
      display: table;
      border: 1px solid red;
      height: 600px;
    }
    div.tr{
      display: table-row;
      border: 1px solid green;
    }
    div.td{
      display: table-cell;
      border: 1px solid blue;
      vertical-align: middle;
    }
    .child{
      border: 10px solid black;
    }

  • 具体例子在这:http://js.jirengu.com/vedew/1/edit?html,css,output

  • 当中涉及到一个display:table的属性，具体参考MDNCSS中display属性

  • 效果如下:
    div装成table元素

translate -50% 实现垂直居中

translate属性具体参考MDN中transform属性 : https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

  • HTML代码:

    1
    2
    3
    4
    5
    <div class="parent">
      <div class="child">
        一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      </div>
    </div>

  • CSS代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .parent{
      height: 400px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

  • 具体参考例子:http://js.jirengu.com/gepuy/1/edit?html,css,output

  • 实现效果如下:
    translate -50%实现垂直居中

absolute margin auto 实现水平垂直居中

margin:0 auto是可以做到垂直居中的，做到水平居中还需要用到绝对定位。

  • HTML代码:

    1
    2
    3
    4
    5
    <div class="parent">
      <div class="child">
        一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      </div>
    </div>

  • CSS代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .parent{
      height: 400px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      position: absolute;
      width: 300px;
      height: 200px;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

  • 具体例子:http://js.jirengu.com/legoy/1/edit?html,css,output

  • 实现效果如下:
    绝对定位 margin auto 实现水平垂直居中

  • 当中涉及到一个绝对定位的知识，具体可参考MDNposition属性:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

flex布局实现水平垂直居中

flex是我最喜欢使用的也，是我使用的最多的布局方式。通过设置align-items:center和justify-content:center即可实现水平垂直居中。

  • HTML代码：

    1
    2
    3
    4
    5
    <div class="parent">
      <div class="child">
        一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      </div>
    </div>

  • CSS代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .parent{
      height: 400px;
      border: 3px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child{
      border: 3px solid green;
      width: 300px;
    }

  • 具体例子:http://js.jirengu.com/wohog/1/edit?html,css,output

  • 实现效果如下:
    flex实现水平垂直居中

  • flex属性具体参考MDNflex:https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

这是一些我对于css用来做垂直居中办法的理解。

__END__

o0Chivas0o
文章作者：o0Chivas0o
文章出处：css垂直居中的几种办法
作者签名：Rich ? DoSomethingLike() : DoSomethingNeed()
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处