我如何用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>
当前回答
这个方法也很好地工作:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
对于内部<div>,唯一的条件是其高度和宽度不应大于其容器的高度。
其他回答
如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:
#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这使得内部的DIV变成一个可以与文本平行集中的内线元素。
你可以以不同的方式做到这一点. 请参见下面的例子:
1. First Method
#outer {
text-align: center;
width: 100%;
}
#inner {
display: inline-block;
}
2. Second method
#outer {
position: relative;
overflow: hidden;
}
.centered {
position: absolute;
left: 50%;
}
给内部 div 一些宽度,并添加 margin:0 auto; 在 CSS 属性中。
如果您不想设置固定宽,并且不需要额外的边界,则将显示器添加到您的元素中: inline-block。
你可以使用:
#element {
display: table;
margin: 0 auto;
}
福克斯
此分類上一篇: <div id="outer"> <div id="inner">Foo foo</div> </div>
文本编辑:中心
應用文本順序:中心的內線內容集中在線框內. 但是,因為內部 div 有默定的寬度: 100% 你必須設定一個特定的寬度或使用下列之一:
显示: 区块 显示: 内线 显示: 内线 区块
此分類上一篇: <div id="outer"> <div id="inner">Foo foo</div> </div>
使用边界: 0 auto 是另一个选项,它更适合较老的浏览器兼容性。
此分類上一篇: <div id="outer"> <div id="inner"> Foo foo</div> </div>
转型
<中心>(分散)