我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
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</
其他回答
方法1:使用边缘财产
如果元素不是区块级元素,然后添加显示器:区块属性到它。
#outer { 显示: flex; justify- 内容: 中心; 背景颜色: 银色; } #inner { 背景颜色: #f07878; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这是一个经典的方法,以中心元素. 设置位置:相对外部元素. 设置内部元素的位置为绝对和左: 50%. 这将推动内部元素从外部元素的中心开始. 现在使用转变属性和设置转变: 翻译X(-50%) 这将使元素的中心水平。
<div id="outer" style="width:100%">
<div id="inner" style="text-align:center">Foo foo</div>
</div>
是的,这是一个短暂而干净的水平调整代码。
.classname {
display: box;
margin: 0 auto;
width: 500px /* Width set as per your requirement. */;
}
添加文本:中心;到 parent div
#outer {
text-align: center;
}
HTTPS://jsfiddle.net/7qwxx9rs/
或
#outer > div {
margin: auto;
width: 100px;
}
HTTPS://jsfiddle.net/f8su1fLz/
它是如此简单。
只需决定你想要给内部Div的宽度,然后使用下面的CSS。
CSS
.inner{
width: 500px; /* Assumed width */
margin: 0 auto;
}
