创建视区的div中心-水平和垂直

Question

我有一个<div id="wrapper">容器，我的整个网站内容将在其中呈现。我尝试过使用css属性，比如margin:0 auto; on #wrapper，让div在垂直和水平方向居中。

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
}

通过使用上面的css，我可以使div位于屏幕的顶部，但如何使其居中(垂直)。当我在firefox中缩小时，我的div会在顶部的中心缩小，但我想要的东西应该始终显示在屏幕的中心，无论是垂直还是水平。

有人能建议我怎么才能得到这样的布局吗？

提前谢谢。

Answer 1

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-250px;
}

演示：http://jsfiddle.net/fJtNQ/

为什么这样能用？

嗯，基本上你在dom里面有一个绝对定位的元素。这意味着你可以把它放在你想要的任何地方，如果你没有一个相对定位的元素作为父元素，那么left和top将是到文档的左/上原点的距离。

分配left:50%和top:50%可以使该元素始终位于屏幕的中心，但在中心，您将发现该元素的左上角。

如果你有固定的宽/高，你可以通过给出负的margin-left和margin-top (因此，在一些非常简单的数学基础上，它们的值将是-(width/2)和-(height/2))，很容易地将中心的点‘转换’成包装器div的中心。

编辑

你也可以通过使用flexbox轻松地居中，加上(一个大的)你不需要指定w/h，例如：

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#wrapper {
  /* whatever style u want */
}

演示：https://jsfiddle.net/00utf52o/

Answer 2

如果你使用固定的宽度/高度，@stecb的答案可以很好地工作。

要将div或图像垂直放置在所有视口的中心并使其具有响应性，请使用以下命令：

#elem-to-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

我刚刚用transform替换了左边距和上边距。

如果要在元素周围留出边距，请使用以下命令：

#outer-elem {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #fafafa;
    position: relative;
}
#elem-to-center {
    width: calc(100% - 60px);
    max-height: calc(100% - 60px);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JSFiddle | Source

我发现这甚至在响应式视图中也很有用。

Answer 3

对于那些需要将子div相对于viewport而不是“相对于父div”居中的人来说，这是一个解决方案。这里提到的其他解决方案在这种情况下不起作用，因为它们倾向于使子div成为相对于父div的中心。

<div id="container">
  <div id="wrapper">Always center, No matter the parent div's position</div>
</div>

#wrapper {
 width:300px;
 height:300px;
 margin:0 auto;
 background:green;
 position:fixed;
 left:50%;
 top:50%;
 margin-left:-150px;
 margin-top:-150px;
}

#container {
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  bottom: 0;
  left: 0;
}

在这里演示http://jsbin.com/yeboleli/2/edit?css,output