css布局--水平垂直居中

1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中

html

<div class="parent">
  <div class="child">使用vertical-align,text-align,inline-block实现水平垂直居中</div>
</div>

css

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

2. 使用positon实现水平垂直居中

html

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

css

  .parent{
    position: relative;
    height: 300px;
  }
  .child{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }

3. 使用flex实现水平垂直居中

html

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

css

  .parent{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
  }