Question

我有一个<div id="wrapper">容器，其中包含我的整个网站内容。我试图通过使用像margin:0 auto; on #wrapper这样的css属性来垂直和水平地创建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轻松地“转换”中心的点实际上是包装div的中心（因此在帮助下）一些非常简单的基本数学，它们的值将是-(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%);
}

我刚用变换替换了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 | Source

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

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

Answer 4

我使用jQuery

$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

Answer 5

考虑在单独的元素上使用display: table和display: table-cell; vertical-align: middle结合使用。因为CSS没有语义含义，所以它是一种可接受的解决方案。

我为你做了一个例子：http://dabblet.com/gist/2002681

唯一的缺点是需要比其他解决方案多一点的标记，但它会随内容收缩和扩展。

Answer 6

最简单，最干净的方法是使用视口大小设置高度，边距（和宽度，如果需要）。
假设您希望容器的function inputHandler() { $(".transparency-color span").text($(this).val() + "%"); } $('#transparency-range').on('input', $.debounce(250, inputHandler));占据屏幕的60％（60vh），您可以将其余部分（40vh，因为视口的总高度= 100vh）在顶部和底部边距之间平均分配，以便元素自动在中心对齐。
将height和margin-left设置为margin-right，将确保容器水平居中。

auto

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }

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

6 个答案: