Question

我使用了一种技巧，我发现它可以达到100％的高度：

body {
  height: 100%;
}

div {
  height: 100%;
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
}

<!DOCTYPE html>
<html>
  <body>
    <div></div>
  </body>
</html>

在这里，我添加了一个转换：translate（50％）;因为我想把它集中起来。但是，这使得身高：100％;不再工作了。无论如何都有两个？

body {
  height: 100%;
  transform: translate(50%);
}

div {
  height: 100%;
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
}

<!DOCTYPE html>
<html>
  <body>
    <div></div>
  </body>
</html>

Answer 1

您是否因某种原因需要专门使用翻译？如果你只需要将div水平居中，你可以试试这个：

body {
  height: 100%;
}

div {
  height: 100%;
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
  border: 1px solid black;
  left: calc(50% - 100px);
}

Answer 2

我假设您想要将黑色DIV居中，而不是实际移动<body>标签。

为此，您需要将transform属性从body移动并更新为div并进行以下更改：

使用translateX()代替translate()。
添加left属性以用于position: absolute;。

当你移动一个元素left: 50%;时，它会从它的左边缘移动它，所以它不是很中心，而是显示在右边比你想要的更多。那是translateX( -50% )进来的地方。它将元素向左移动了一半自己的宽度。

＆＃13;

html,
body {
  height: 100%;
}

div {
  position: absolute;
  left: 50%;
  height: 100%;
  width: 200px;
  background-color: rgb( 0, 0, 0 );
  transform: translateX( -50% );
}

＆＃13;

<div></div>

＆＃13;

使用翻译的一个好处是，如果你没有为你的DIV设置特定的宽度，它仍然会居中。

＆＃13;

html,
body {
  height: 100%;
}

div {
  position: absolute;
  left: 50%;
  height: 100%;
  color: white;
  background-color: rgb( 0, 0, 0);
  transform: translateX( -50%);
}

＆＃13;

<div>
  <p>
    Some simple text goes right here.
  </p>
</div>

＆＃13;

Answer 3

你很幸运第一个片段有效。

第一个代码段：body位于static position，而div中的absolute将使用html（根元素作为参考））。在这个配置中它可以工作（删除绝对到div，它没有高度！）
第二个代码段：body + transform如果您提供正文position:relative，效果类似。 div会将其用作参考。但是身体有height:100% ...... 没有！

你需要设置身高：100％为HTML，所以身体也有高度，div也可以使用级联 S tyle S heet;）

html {height:100%;/* retrieved from window's height */}
body {
  height: 100%;/* retrieved from html */
  transform: translate(50%);/* similr to position:relative; + eventually left:50%; */
}

div {
  height: 100%;/* retrieved from body */
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
}

<!DOCTYPE html>
<html>
  <body>
    <div></div>
  </body>
</html>

现在它站在中间，不确定:)，但div恢复了屏幕高度。

100％高度与变换

3 个答案: