我如何用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>
当前回答
您可以使用 CSS Flexbox 来实现这一点. 您只需要将 3 个属性应用到母元素,以便一切都工作。
#outer {
display: flex;
align-content: center;
justify-content: center;
}
看看下面的代码会让你更好地了解属性。
了解更多关于CSS Flexbox的信息
#outer { 显示: flex; align 标题: 中心; justify 内容: 中心; 边界: 1px 固体 #ddd; 宽度: 100%; 高度: 200px; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
其他回答
试试这:
<div id="a">
<div id="b"></div>
</div>
CSS:
#a{
border: 1px solid red;
height: 120px;
width: 400px
}
#b{
border: 1px solid blue;
height: 90px;
width: 300px;
position: relative;
margin-left: auto;
margin-right: auto;
}
我们可以使用下一个CSS的类,允许中心垂直和垂直对其父母的任何元素:
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
而不是多种包装和/或自动边缘,这个简单的解决方案对我来说工作:
<div style="top: 50%; left: 50%;
height: 100px; width: 100px;
margin-top: -50px; margin-left: -50px;
background: url('lib/loading.gif') no-repeat center #fff;
text-align: center;
position: fixed; z-index: 9002;">Loading...</div>
它将Div放在视图(垂直和水平)的中心,尺寸和调整尺寸,中心背景图像(垂直和水平),中心文本(水平),并保持Div在视图和内容的顶部。
专注于水平
演示:
以垂直和垂直为中心
在我的经验中,将盒子垂直和水平中心的最佳方式是使用额外的容器,并应用以下属性:
外部容器:
内部容器:
内容盒子:
.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吧!
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</