CSS 垂直居中的方案

.parent > .child，尽量不让 parent 定高

1、.parent 不定高，使用 padding 加 line-height 撑开即可 预览链接

  <style>
    .parent{
    border: 1px solid green;
    line-height: 30px;
    padding: 15px 0;
  }
  </style>
  <div class="parent">
    <div class="child">
      Mac
    </div>
  </div>

如果 parent 不得不定高，

1、CSS 自带属性实现，兼容IE ( 预览地址 )

• <table> <tr> <td>

  <style>
    table{
      height: 500px;
      border: 1px solid black;
    }
    
    .child{
      border: 3px solid green;
    }
  </style>
  <table>
    <tr>
      <td>
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
      </td>
    </tr>
  </table>

2、上面方法的变形，支持IE（ 预览地址 ）

 <style>
    .table{
      display: table;
      height: 500px;
      border: 1px solid black;
    }
    
    .tr{
      display: table-row;
      border: 1px solid grey;
    }
    .td{
      display: table-cell;
      border: 1px solid red;
      vertical-align: middle;
    }
    .child{
      border: 3px solid green;
    }
  </style>
  <div class="table">
    <div class="tr">
      <div class="td">
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
      </div>
    </div>
  </div>

3、伪类方法，预览地址 支持IE

  <style>
    .parent{
      height: 500px;
      border: 1px solid green;
      /* text-align: center; */
    }
    
    .child{
      border: 1px solid red;
      width: 300px;
      display: inline-block;
      vertical-align: middle;
    }
    .parent:before{
      content: '';
      outline: 3px solid blue;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
    .parent:after{
      content: '';
      outline: 3px solid blue;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  </style>
  <div class="parent">
    <span class="before"></span><div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div><span class="after"></span>
  </div>

4、绝对定位 预览地址

<!--4.1 兼容IE-->
  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    
    .child{
      width: 300px;
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      height: 100px;
      margin-top: -50px;/*如果要做到水平居中，需要添加 height，即高度确定；
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>​
    
<!--4.2 不支持IE，不知道.child 的宽高时依然可以垂直+水平居中-->
  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    
    .child{
      width: 300px;
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>​
<!--4.3 "margin-auto"垂直定位法 ( http://js.jirengu.com/zigav/3/edit )-->
  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    
    .child{
      width: 300px;
      height: 100px;
      border: 1px solid green;
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>​
  </div>

5、flex 布局法( CSS 3属性，不支持IE，预览地址 )

  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .child{
      width: 300px;
      border: 1px solid green;
     
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>