我如何用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%;
}
两个元素必须是相同的宽度,以便正常运作。
其他回答
有一个选择,我发现:
每个人都说要使用:
margin: auto 0;
但还有另一个选项. 设置此属性为父母 div. 它在任何时候都完美工作:
text-align: center;
看,孩子去中心。
最后,为您提供CSS:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}
例如,请参见此链接和下面的剪辑:
div#outer { 高度: 120px; 背景颜色: 红色; } div#内部 { 宽度: 50%; 高度: 100%; 背景颜色: 绿色; 边缘: 0 自动; 文本平衡: 中心; /* 文本平衡到中心垂直. */ 线高度: 120px; /* 文本平衡到中心垂直。
如果你有很多孩子在一个父母之下,那么你的CSS内容应该像这个例子。
HTML 内容看起来喜欢此:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
然后,看看这个例子在Fiddle。
专注于水平
演示:
以垂直和垂直为中心
在我的经验中,将盒子垂直和水平中心的最佳方式是使用额外的容器,并应用以下属性:
外部容器:
内部容器:
内容盒子:
.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吧!
克里斯·科伊尔(Chris Coyier)在他的博客上写了一篇关于“在未知中集中”的好文章,这是一个多种解决方案的环节,我发表了一个没有发表在这个问题上,它有更多的浏览器支持,而不是Flexbox解决方案,你不使用显示:表;这可能会破坏其他事情。
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
这就是你想要的最短的方式。
JSFIDDLE
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}