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

Question

我有一个<div id="wrapper">容器,我的整个网站内容将存在.我试图通过使用css属性来垂直和水平地创建div中心margin:0 auto; on #wrapper.

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

通过使用上面的CSS,我可以在屏幕的顶部中心(但是如何使其居中(垂直)).当我在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%启用此元素始终位于屏幕的中心,但在中心,您将找到元素的左上角.

如果你有固定的宽度/高度,你可以很容易地"翻译"在中心的点是实际包装div的中心给予否定margin-left和margin-top(因此与一些非常简单基本的数学的帮助,他们的价值观会-(width/2)和-(height/2))

编辑

你也可以轻松地使用中心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来替换margin-left和margin-top.

如果您想要元素周围的边距,请使用:

#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 | 资源

我发现即使在响应式视图中这也很有用.

Answer 3

对于那些需要将子div相对于视口居中而不是"相对于父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