html - 居中的 div 在顶部被切断？

Question

这是我正在处理的页面:http://en08-phx.stablehost.com/~news/test.html

这是我用来使 div 居中的代码:

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  width: 70%;
  height: auto;
  padding: 20px;  
  background-color:rgba(255, 255, 255, 0.2);
  color: white;
  text-align: center;
  border-radius:5px;
  border:2px solid rgba(255, 255, 255, 0.5);
}

每当我减小浏览器的宽度或使用手机时，页面顶部开始被截断。

无论浏览器宽度大小如何，我都希望 div 居中。但是，如果浏览器的高度太小，我宁愿只在顶部/底部添加 10px 的边距，并确保显示所有文本。

我到底做错了什么？

Answer 1

这种定位技术(前 50% 减去 translateY -50%)的问题是它根据自己的高度对齐自己。当视口(viewport)将容器挤压得比视口(viewport)高时，它保持居中，顶部和底部被切断。如果您能够使用 flexbox，我推荐 flexbox ( http://caniuse.com/#search=flex )。

将您希望始终居中的容器包裹在另一个容器中，例如 centered-wrapper 并应用 flexbox 使其居中:

.centered-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

最小高度在这里非常重要。如果您的 div 没有拉伸(stretch)到页面的高度，它将填充并居中它的 child 。如果是，那么它将继续扩展，避免您也遇到的情况。如果您的框相对于整个页面的高度是相对的，那么您还需要设置页面的高度才能使其正常工作:

html,
body {
  height: 100%;
}

您不需要对居中的 div 进行任何居中，只需视觉样式。

这是它的实际示例:https://jsfiddle.net/vfc9n7p2/