如何在CSS中进行垂直+水平居中
它经常发生，我想要在另一个垂直和水平中心的CSS盒。 什么是最简单的方式来满足以下约束条件？
我目前使用4（！）嵌套的div来实现这一点，用以下几行的css：
.centering-1 {
position:absolute;
top:0; left:0; right:0; bottom:0;
text-align:center;
visibility:hidden;
}
.centering-2 {
height:100%;
display:inline-table;
}
.centering-3 {
display:table-cell;
vertical-align:middle;
}
.centering-content {
visibility:visible;
}
你可以看到这是一个jsbin片段 。 然而，这种方法虽然可行，但由于大量的包装divs而感觉极端矫枉过正，并且它不适用于大于容器的内容。 我怎样才能把东西放在CSS中？
水平对中很容易：
.inner {
width: 70%; /* Anything less than 100% */
margin-left: auto;
margin-right: auto;
}
但垂直居中有点棘手。 现代浏览器的最佳技术是将内联块和伪元素结合起来。 这源于“鬼元素”，这是http://css-tricks.com/centering-in-the-unknown/的最后一项技术。 它设置添加一个伪元素，并使用内联块样式获得居中。 CSS：
.outer {
height: 10rem;
text-align: center;
outline: dotted black 1px;
}
.outer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
width: 10rem;
display: inline-block;
vertical-align: middle;
outline: solid black 1px;
}
Codepen上的一个例子：http://codepen.io/KatieK2/pen/ucwgi
对于更简单的情况，以下可能是不错的选择：
对于单行内容，您可以通过使用大于字体大小的行高来对元素中的文本执行快速且肮脏的垂直居中作业：
.inner {
border: 1px solid #666;
line-height: 200%;
}
最广泛支持的解决方案是使用非语义表。 这适用于非常旧版本的IE，不需要JavaScript：
td.inner {
vertical-align: middle;
}
这里是已知高度元素的简单解决方案（可以是em ，而不是px ）：
.outer {
position:relative;
}
.inner {
position: absolute;
top:50%;
height:4em;
margin-top:-2em;
width: 50%; left: 25%;
}
你可以减少2个元素。 任何小于这个的东西都需要IE8（和IE9）不支持的东西。
http://cssdeck.com/labs/0ltap96z
<div class="centering-1">
<div class="centering-2">
<div class="intrinsically-sized-box">
<p>You can put any content here too and the box will auto-size.</p>
</div>
</div>
</div>
CSS：
body {max-width:750px;}
.generalblock {
margin-top:2em;
position:relative;
padding:10px;
border:20px solid cyan;
font-size: 18px;
}
.centering-1 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
visibility:hidden;
display: table;
width: 100%;
}
.centering-2 {
display:table-cell;
vertical-align:middle;
}
.intrinsically-sized-box {
visibility:visible;
max-width:300px;
margin: 0 auto;
background: yellow;
position:relative;
border:1px solid black;
}