我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
我最近找到了一个方法:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
两个元素必须是相同的宽度,以便正常运作。
其他回答
设置宽度,并设置边缘向左和边缘向右到自动。 这是仅限于水平,但是. 如果你想要两种方式,你只会做这两种方式. 不要害怕尝试; 它不像你会打破任何东西。
如果有人想要一个 jQuery 解决方案的中心调整这些 divs:
$(window).bind("load", function() {
var wwidth = $("#outer").width();
var width = $('#inner').width();
$('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
专注于水平
演示:
以垂直和垂直为中心
在我的经验中,将盒子垂直和水平中心的最佳方式是使用额外的容器,并应用以下属性:
外部容器:
内部容器:
内容盒子:
.outer 容器 { 显示: 表; 宽度: 100%; 高度: 120px; 背景: #CCC; }. 内部容器 { 显示: 表 细胞; 垂直平面: 中间; 文本平面: 中间; }.centered 内容 { 显示: inline-block; 背景: #FFF; padding: 20px; 边界: 1px 固体 #000; } <div class="outer-container"> <div class="inter-container"> <div class="centered-content">
再看这个Fiddle吧!
使用:
<style>
#outer{
text-align: center;
width: 100%;
}
#inner{
text-align: center;
}
</style>
我使用Flexbox或CSS网络
Flexbox #outer{ 显示: flex;正当内容:中心; } CSS 网络 #outer { 显示: 内线网络; 网络模板线: 100px 100px; 网络模板列: 100px 100px; 网络错误: 3px; }
你可以以多种方式解决这个问题。