Question

我知道这个问题的不同版本已被问过一百万次，但我似乎无法找到一个明确的问题答案。如何在文档正文中垂直和水平居中h1？我不会在另一个div或其他任何东西中拥有它，我只是希望它集中在页面上

Answer 1

您可以添加CSS属性text-align: center; 要将它放在屏幕的垂直中心，您需要一个解决方法。添加

margin-top: calc(50vh - 12px);

calc会计算括号中的内容。 vh是一个测量单位，表示视口高度（以百分比表示）。

所以基本上你添加一个窗口高度的50％的偏移减去12px（当h1是24px时文本高度的一半）到元素

Answer 2

还有其他选择。只是为了好玩，这是一个，虽然不是最好的选择（我使用display：table或flex）。你没有来使用包含元素，但这样做比将标题样式放在body元素上更安全。

＆＃13;

header {
  background: #30353b;
  position: relative;
  height: 100vh;
}

h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  margin: 0;
  line-height: 0;
  color: white;
}

body {margin: 0; padding: 0;}

＆＃13;

<header>
<h1>heading text</h1>
</header>

＆＃13;

如何将h1完全置于体内

2 个答案: