我知道如果使用margin:0 auto;，我们可以水平居中一个div。那么margin:auto auto;应该能像我想的那样工作吗？也能垂直居中吗？
为什么vertical-align:middle;也不起作用呢？
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
}<div class="black">
<div class="message">
This is a popup message.
</div>
</div>2020年8月更新:
尽管下面的内容仍然值得阅读, 但我们现在已经有Flexbox了，所以按照这个答案使用它即可。
以下方法无法使用:
vertical-align:middle 因为它不适用于块级元素
margin-top:auto 和 margin-bottom:auto 因为它们的计算值会被计算为零
margin-top:-50% 因为基于百分比的margin值是相对于包含块的宽度计算的
事实上，文档流的性质和元素高度计算算法使得在父元素内部垂直居中一个元素使用margin是不可能的。每当垂直margin值被更改时，它会触发父元素高度重新计算（重新布局），这将进一步触发原始元素的重新居中...使其成为一个无限循环。
你可以使用：
像这样的一些解决方案适用于您的情况; 这三个元素必须像这样嵌套：
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
border: 1px solid orange;
}<div class="container">
<div class="helper">
<div class="content">
<p>stuff</p>
</div>
</div>
</divJSFiddle 在 Browsershot 中正常运行。
# 是一种 hack，它可以让规则只被 IE7 及以下版本解释。你可以选择将这些规则包含在专门针对 IE 的样式表中，例如使用条件注释等方法。 - Olegposition: absolute; top: 50%; transform: translateY(-50%);这种写法也很常用且可行（不像top:50%; margin: -$halfHeight需要事先知道高度）... - Frank N#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
}
#child {
margin: auto auto;
}<div id="parent">
<div id="child">hello world</div>
</div>#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}<div id="parent">
<div>hello world</div>
</div>这是我找到的最佳解决方案：http://jsfiddle.net/yWnZ2/446/ 可在Chrome、Firefox、Safari、IE8-11和Edge中使用。
如果您已经声明了height（例如height: 1em，height: 50%等），或者这是一个浏览器知道其高度的元素（如img，svg 或 canvas），那么您只需要这个代码就可以垂直居中：
.message {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
通常情况下，您需要指定一个width或max-width，以便内容不会拉伸到整个屏幕/容器的长度。
如果您将其用于模态框，并希望始终将其置于视口中心并与其他内容重叠，请对两个元素都使用position: fixed;而非position: absolute。 http://jsfiddle.net/yWnZ2/445/
这里有一篇更完整的说明：http://codepen.io/shshaw/pen/gEiDt
position: relative，该元素就会居中于其内部。如果您想了解更多信息，可以阅读我在Smashing Magazine上关于该技术的详细介绍：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/。 - shshawdisplay: table来处理可变高度内容。否则，此方法应按预期工作。请阅读writeup以获取更多细节。您还可以在IE8/9中测试full view，以查看是否存在任何问题。 - shshaw编辑：现在已经是2020年了，我会使用flexbox代替。
原始回答：
Html
<body>
<div class="centered">
</div>
</body>
CSS
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我知道这个问题是来自2012年的，但是我发现了最简单的方法，并想分享出来。
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
和 CSS：
#parent{
height: 100%;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
}<div class="black">
<div class="message">
This is a popup message.
</div>
</div>margin-top 不能以相对于元素高度的百分比设置，因此您最终会得到一个依赖尺寸的修复。 - Olegmargin-top 中使用 %。 - tuffimg边界框的div，它具有固定的高度。 - Izkata.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);
}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%; left: 0%; right: 0%;
}
https://jsfiddle.net/GlupiJas/5mv3j171/
或者针对流体设计 - 如果需要精确的内容居中，请使用下面的示例：
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/GlupiJas/w3jnjuv0/
如果内容超过窗口高度的50％，则需要设置'min-height'。您还可以使用媒体查询来操作移动设备和平板电脑的高度，但前提是您要进行响应式设计。
我想您可以进一步使用简单的JavaScript / JQuery脚本来操纵min-height或fixed height（如果有必要）。
其次 - 如果内容是流体的，您还可以使用表格和表格单元格CSS属性进行垂直对齐和文本居中：
/*in a wrapper*/
display:table;
/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;
它的工作和规模完美无缺，通常用作响应式网页设计解决方案，使用网格布局和媒体查询来操作对象的宽度。
.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);
}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}
.black {
display:flex;
flex-direction: column;
height: 200px;
background:grey
}
.message {
background:yellow;
width:200px;
padding:10px;
margin: auto auto;
}<div class="black">
<div class="message">
This is a popup message.
</div>
</div>.black {
position:absolute;
/*
Replace with a one line inset property.
top:0;
bottom:0;
left:0;
right:0;
*/
inset: 0;
background:rgba(0,0,0,.5);
/*
Since no one has mentioned it yet,
here it is the grid display and
the place-content property.
*/
display:grid;
place-content: center;
}
.message {
background:yellow;
width:200px;
/*
There's no point here.
margin:auto auto;
*/
padding:10px;
}<div class="black">
<div class="message">
This is a popup message.
</div>
</div>.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}<div class="black">
<div class="message">
This is a popup message.
</div>