h1 在屏幕中间居中

Question

如何将文本水平和垂直居中？我不想使用绝对位置，因为我尝试使用它并且我的其他 div 变得更糟。还有另一种方法吗？

 div {
    height: 400px;
    width: 800px;
    background: red;
}

 <div>
    <h1>This is title</h1>
</div>

原文由 Dina 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 display flex 它为其所有直接子项启用 flex 上下文，并使用 flex direction 建立主轴，从而定义方向 flex 项目放置在 flex 容器中

div{
  height: 400px;
  width: 800px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

原文由 elreeda 发布，翻译遵循 CC BY-SA 3.0 许可协议