我如何用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%)
}
其他回答
CSS3:
您可以在父母容器上使用以下风格平等地分配儿童元素:
display: flex;
justify-content: space-between; // <-- space-between or space-around
关于正当内容的不同价值观的好示范。
此分類上一篇
CanIUse:浏览器兼容性
尝试一下:
#containerdiv {显示: flex; justify-content: space-between; } #containerdiv > div {背景颜色:蓝色;宽度: 50px;颜色:白色;文本平行:中心; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="containerdiv"> <div>88</div> <div>77</
#outer { 宽度: 160px; padding: 5px; 边界风格: 固体; 边界宽度: 薄; 显示: 区块; } 内部 { 边界: 自动; 背景颜色: 光蓝; 边界风格: 固体; 边界宽度: 薄; 宽度: 80px; padding: 10px; 文本平衡: 中心; } <div id="outer"> <div id="inner">Foo foo</div> </div>
您可以使用链接 https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview
.outer{
display: table;
width: 100%;
height: 100%;
}
.inner {
vertical-align: middle;
}
参考 https://v4-alpha.getbootstrap.com/例子/覆盖/
使用此代码:
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#inner {
width: 50%;
margin: 0 auto;
text-align: center;
}
这就是你想要的最短的方式。
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 % );
}
