将div垂直居中在另一个div内
我想要将一个div添加到另一个div中。
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
这是我目前使用的CSS。
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
正如你所看到的，我现在使用的方法取决于innerDiv宽度和高度的innerDiv 。如果宽度/高度改变，我将不得不修改margin-top和margin-left是否有任何通用的解决方案，我可以无论内部区域大小如何，都可以使用innerDiv中心？
我发现使用margin:auto可以将innerDiv横向排列到middle.But垂直排列中间是什么？
TL;博士
垂直对齐中间的作品，但您必须在您的父元素上使用table-cell ，并在子inline-block上使用inline-block 。
此解决方案在IE6和7中不起作用。
你的是更安全的方式。
但是，既然你用CSS3和HTML5标记了你的问题，我认为你不介意使用现代解决方案。
经典的解决方案（表格布局）
这是我最初的答案。 它仍然正常工作，并且是最广泛支持的解决方案。 表格布局会影响您的渲染性能，所以我建议您使用更现代的解决方案之一。
这是一个例子
经测试：
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
现代解决方案（转型）
由于现在转换得到了很好的支持，所以有一种更简单的方法来实现它。
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
演示
♥我最喜欢的现代解决方案（flexbox）
我开始越来越多地使用flexbox，现在它也得到了很好的支持，这是目前最简单的方法。
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
演示
更多的例子和可能性：比较一个页面上的所有方法
实现这种水平和垂直居中的另一种方式是：
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
（参考）
另一种方法是使用变换翻译
外部分部必须将其position设置为relative或fixed position ，内部分部必须将其position设置为absolute ， top和left 50%并应用transform: translate(-50%, -50%) 。
div.cn {
position: relative;
width: 200px;
height: 200px;
background: gray;
text-align: center;
}
div.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}<div class="cn">
<div class="inner">
test
</div>
</div>