我有一个包含整个网站内容的
margin:0 auto; on #wrapper来使该div垂直和水平居中。#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
使用上述CSS可以将div置于屏幕顶部中心，但如何使它在垂直方向上居中。当我在Firefox缩小页面时，div会在顶部中心处缩小，但我想让它始终从垂直和水平两个方向上居中。
有没有人可以建议一下如何实现这样的布局。
提前感谢。
#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:50% 和 top:50% 可以使该元素始终处于屏幕中央，但实际上该元素的中心点在左上角。
如果你拥有固定的宽度/高度，你可以通过给负的 margin-left 和 margin-top 赋值（因此借助一些非常简单的基本数学知识，它们的值将是 -(width/2) 和 -(height/2)），从而轻松“转换”元素中心点为包装器div的中心点。
编辑
你还可以通过使用 flexbox 轻松居中，而且（很重要）不需要指定宽高，例如：
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 */
}
@stecb的回答在处理固定宽度/高度时很好用。
要在所有视窗中垂直居中定位一个div或图像并使其具有响应性，请使用以下代码：
#elem-to-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我刚刚用 transform 替换了 margin-left 和 margin-top。
如果你想要一个包围元素的 margin，使用这个：
#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%);
}
我发现即使在响应式视图中，这也很有用。
#elem-to-center 在大视口下运作良好。但是在小视口下会出现问题。如何将此解决方案转换为小视口？ - Gitau Harrison对于需要将子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;
}
wrapper 元素在水平方向上居中，但在垂直方向上并没有居中。 - Krisztián Balla$(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();
top: $('.elm').css('top', ($(window).height() - $(elm).outerHeight())/2 + $(window).scrollTop()) - Jose Browne最简单、最干净的方法是使用视口大小设置高度、边距（如果需要，还可以设置宽度）。
例如，你想让容器的height占据屏幕的60%（60vh），你可以将其余的空间（因为视口的总高度=100vh）平均分配给上下边距，这样元素就会自动居中对齐。
将margin-left和margin-right设置为auto，可以确保容器在水平方向上居中对齐。
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}<div class="container">
</div>