css布局--垂直居中

1. 使用table-cell和vertical-align实现垂直居中

html

<div class="parent">使用table-cell和vertical-align实现垂直居中</div>

css

  .parent{
    display: table-cell;
    vertical-align: middle;
    height:300px;
  }

效果

2. 使用line-height和vertical-align实现垂直居中

html

<div class="parent">使用vertical-align和line-height实现垂直居中</div>

css

  .parent{
    display: inline-block;
    vertical-align: middle;
    line-height:300px;
  }

效果图

3. 使用position实现垂直居中

html

<div class="parent">
  <div class="child">使用position实现垂直居中</div>
</div>

css

  .parent{
    position: relative;
  }
  .child{
    position: absolute;
    top:50%;
    transform: translate(0,-50%);
  }

4. 使用flex实现垂直居中

html

<div class="parent">使用flex实现垂直居中</div>

css

  .parent{
    display: flex;
    align-items: center;
  }