center h1 在屏幕中间

Question

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

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

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

Answer 1

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

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

Answer 2

只需这样做，它适用于所有浏览器：

div{
     height: 400px;
     width: 800px;
     background: red;
     line-height: 400px;
     text-align: center;
}

line-height属性指定行高（垂直居中），text-align:center直接水平居中

Answer 3

<div>
  <style>
div {
  position: fixed;
  top: 50%;
  left: 50%;
}</style>
<h1>This is title</h1>
</div>

使用 position: fixed 将位置设置为固定值，使用 top 和 left 都设置为 50% 您将在屏幕。

祝编码顺利！

这里有更多信息：https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 4

.container {
    display: table;
}
.centered {
    display: table-cell;
      height: 400px;
      width: 800px;
      background: red;
    text-align: center;
    vertical-align: middle;
    }

<div class="container">
<div class="centered">
  <h1>This is title</h1>
</div>
</div>

center h1 在屏幕中间

center h1 in the middle of screen

html

css

text-align