"transform: translateX(-50%)" 和 "position: absolute" 和 "left: 50%" 在 Internet Explorer 中产生滚动条答案

【问题标题】："transform: translateX(-50%)" with "position: absolute" and "left: 50%" results in scrollbar in Internet Explorer"transform: translateX(-50%)" 和 "position: absolute" 和 "left: 50%" 在 Internet Explorer 中产生滚动条
【发布时间】：2014-10-19 22:33:58
【问题描述】：

我想在视口中间放置一个main 容器。

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

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

看看这支笔：

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

有什么办法可以防止水平滚动条吗？ overflow-y: none 似乎不起作用。

【问题讨论】：

标签： html css internet-explorer transform

【解决方案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/

【讨论】：

伙计，你拯救了我的一天。

【解决方案2】：

你只需要改变两件事。

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

【讨论】：

为什么需要translateY

【解决方案3】：

如果你想让你的元素水平和垂直居中，你也可以使用这样的东西。

.parent {
  display: flex;
}

.child {
  margin: auto;
}

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

【讨论】：