css - 未指定父级高度时垂直居中文本

Question

对于固定高度的容器，我会简单地使 line-height 属性与高度匹配。不指定容器高度怎么办？

Answer 1

有两种方法。这是表格方法。另一种方法是使父容器相对，并使用 top:50%; 使 p 标签成为绝对。如果您不支持 ie8 或更低版本，您可以使用 flexbox。这是学习 flexbox 的重要资源:http://flexboxfroggy.com/

.container{
  width: 300px; 
  height: 400px; 
}

.content{
  width: 100%; 
  height: 70%; 
  display: table;
}

p{
  display: block; 
  display: table-cell; 
  vertical-align: middle; 
}

<div class="container">
  <div class="content">
   <p>
   Center text
   </p>
  </div>
</div>