css布局--水平垂直居中

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

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

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

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

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

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