参见英文答案 >
How do I vertically center text with CSS?37个
如何将文本水平和垂直居中？我不想使用绝对位置因为我尝试使用它而我的其他div变得更糟.还有另一种方法吗？
如何将文本水平和垂直居中？我不想使用绝对位置因为我尝试使用它而我的其他div变得更糟.还有另一种方法吗？
div {
height: 400px;
width: 800px;
background: red;
}
<div>
<h1>This is title</h1>
</div>
解决方法
你可以使用display flex它为所有直接子节点启用flex上下文,并且flex方向建立主轴,从而定义flex项放置在flex容器中的方向
div{
height: 400px;
width: 800px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}