我如何用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>
当前回答
您可以使用 Flexbox 如下:
#outer { 显示: flex; justify-content: center } <div id="outer"> <div id="inner"> Foo foo</div> </div>
适用于所有浏览器支持的 Autoprefixer:
#outer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
或其他
使用转换:
#inner { 位置:绝对; 左: 50%; transform:翻译(-50%) } <div id="outer"> <div id="inner"> Foo foo</div> </div>
使用 Autoprefixer:
#inner {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%)
}
其他回答
Flexbox 中心 垂直和垂直 中心 调整一个元素
.wrapper {边界: 1px 固体 #678596; 最大宽度: 350px; 边界: 30px 自动;}.parentClass { 显示: flex; 定义内容:中心; 平衡元素:中心; 高度: 300px;}.parentClass div { 边界: 5px; 背景: #678596; 宽度: 50px; 线高度: 50px; 文本平衡:中心; 字体大小: 30px; 颜色: #fff;} <h1>Flexbox 中心 垂直和垂直 中心 平衡元素</h1> <h2>j
它也可以用绝对定位来垂直和垂直集中,如下:
#outer{
position: relative;
}
#inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
专注于水平
演示:
以垂直和垂直为中心
在我的经验中,将盒子垂直和水平中心的最佳方式是使用额外的容器,并应用以下属性:
外部容器:
内部容器:
内容盒子:
.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吧!
根据您的情况,最简单的解决方案可能是:
margin: 0 auto; float: none;
我已经应用了内线风格到内部 div. 使用此一个:
<div id="outer" style="width:100%">
<div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>