将一个div垂直居中于另一个div内[重复] – 开发百科-程序代码问答平台

这个问题在这里已经有答案了：

如何垂直居中&lt；部门&gt；在CSS的父元素内部？[副本]

（17个答案）

两年前关闭的

我想将一个div放在另一个div的中间

&lt；div id=&quot；outerDiv&quot&燃气轮机；
&lt；div id=&quot；innerDiv&quot&燃气轮机；
&lt/部门&gt；
&lt/部门&gt；

这是我目前正在使用的CSS

#outerDiv{
宽度：500px；
高度：500px；
位置：相对位置；
}
#innerDiv{
宽度：284px；
高度：290px；
位置：绝对位置；
最高：50%；
左：50%；
边缘顶部：-147px；
左边距：-144px；
}

如您所见，我现在使用的方法取决于innerDiv的宽度和高度值。如果宽度/高度发生变化，我将不得不修改页边距顶部和页边距左侧值。是否有任何通用解决方案可用于将innerDiv置于中心位置，而不考虑其大小

我发现使用margin:auto可以将innerDiv水平对齐到中间。但是垂直对齐中间呢

tl；dr

“垂直对齐中间”可以工作，但必须在父元素上使用表格单元格，在子元素上使用内联块

此解决方案在IE6&amp；中不起作用；7. <你的方法更安全<但是既然你用CSS3和HTML5标记了你的问题，我想你不介意使用现代的解决方案

经典解决方案（表格布局）

这是我最初的回答。它仍然可以很好地工作，是得到最广泛支持的解决方案。表布局将影响渲染性能，因此我建议您使用一种更现代的解决方案

这里有一个例子

测试地点：

HTML

&lt；div class=“cn”&gt&书信电报；div class=“内部”&gt；您的内容&lt/部门&gt&lt/部门&gt；

CSS

.cn{
显示：表格单元格；
宽度：500px；
高度：500px；
垂直对齐：中间对齐；
文本对齐：居中；
}
.内部{
显示：内联块；
宽度：200px；高度：200px；
}

现代解决方案（转换）

因为转换现在得到了很好的支持，所以有一种更简单的方法

CSS

.cn{
位置：相对位置；
宽度：500px；
高度：500px；
}
.内部{
位置：绝对位置；
顶部：50%；左侧：50%；
转换：翻译（-50%，-50%）；
宽度：200px；
高度：200px；
}

演示

♥ 我最喜欢的现代解决方案（flexbox）

我开始越来越多地使用flexbox，它现在也得到了很好的支持，这是迄今为止最简单的方法

CSS

.cn{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

演示

更多例子&amp；可能性：
比较一页上的所有方法