Question

我想将main容器放在视口中间。

容器绝对定位，因为我希望它使用position: absolute;top: 0;bottom: 0来填充整个垂直空间（我知道我可以通过height:100%使用html, body, main来达到类似的效果，但只要main的内容超过了整个高度，main容器就不会在这100％的范围内伸展，这不是我想要的。“

因此，为了将绝对定位的main容器放置在视口的中间，我依靠transform: translateX(-50%)，它可以轻松地工作 - 除了在Internet Explorer中添加了不需要的水平滚动条！

看看这支笔：

http://codepen.io/jmuheim/pen/wCzcr

有没有办法阻止水平滚动条？ overflow-y: none似乎无法运作。

Answer 1

前几天我遇到了同样的问题。它似乎是一个错误，也是更容易解决问题的方法，它可以从right代替left来定位元素。

要使用您的示例，结果将是：

main {
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  width: 50%;
  background-color: red;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

你可以在那里试一试：https://jsfiddle.net/julienvanderkluft/3udza0te/

Answer 2

您只需要更改两件事。

right: 50%;
transform: translateX(50%)

Answer 3

如果您想将元素水平和垂直居中，也可以使用类似的方法。

.parent {
  display: flex;
}

.child {
  margin: auto;
}

<div class="parent">
  <div class="child">
    <span>Center</span>
  </div>
</div>

＆＃34;转换：translateX（-50％）＆＃34;与＆＃34;位置：绝对＆＃34;和＆＃34;左：50％＆＃34;导致Internet Explorer中的滚动条

3 个答案: