html - 如何始终将页面的中心保持在调整大小的屏幕的中心

Question

我希望在调整浏览器大小时，我的页面的确切中心位于页面的中心，例如，如果我的内容是屏幕的 100%，则当我调整时，垂直 50% 的任何内容都应该位于中心使屏幕更薄。

这是我的 CSS 的样子:

样式.CSS

.container{
    width: 1400px;

}
body{
    background-image: url("../images/background.png");
    background-color:ffffff;
    margin-bottom:50px;

}

#border{
    width: 50%; 
    height:auto;
    border: 5px solid #147b8a;
    border-style:ridge;
    margin-top: 0px;
    margin-bottom: 0px;
    background: rgba(238, 238, 238, 0.9);
    border-radius:30px;
    }

有谁知道做我想做的事情的方法吗？我想这样做的原因是当浏览器最大尺寸时，登录表单位于页面中央，但是当浏览器只有屏幕宽度的一半时，您只能看到登录表单的一半，我希望它重新定位，以便它位于调整大小的浏览器的中心。 谢谢

Answer 1

您可以结合使用绝对位置和 translateX/Y 来执行此操作:

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

top 和 left 使用父元素作为定位上下文，而 translate 的操作基于元素本身。

此处示例:http://codepen.io/anon/pen/QjJJZw