Question

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

这就是我的CSS：

的style.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

您可以使用position absolute和translateX / Y的组合来执行此操作：

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

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

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

Answer 2

为此，请始终使用％单位并将边距，填充或边框保留为自动或使用％单位定义。

<body>
  <div class="cenDiv">
  Hello. 
  <div>
</body>

CSS代码

.cenDiv {
  width:80%;
  height:80%;
  margin:auto;
}

只要您希望布局与缩放同步，请使用％unit指定值。

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

2 个答案: