html – 屏幕中间的中心h1

发布时间：2020-12-14 16:34:52 所属栏目：资源来源：网络整理

导读：参见英文答案 How do I vertically center text with CSS?37个如何将文本水平和垂直居中？我不想使用绝对位置因为我尝试使用它而我的其他div变得更糟.还有另一种方法吗？ div { height: 400px; width: 800px; background: red;} div h1This is title/h1/div

参见英文答案 > How do I vertically center text with CSS?37个
如何将文本水平和垂直居中？我不想使用绝对位置因为我尝试使用它而我的其他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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!