我如何用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>
当前回答
Firefox 和 Chrome:
<div style="width:100%;"> <div style="width: 50%; margin: 0px auto;"> 文本</div> </div>
适用于 Internet Explorer、Firefox 和 Chrome:
<div style="width:100%; text-align:center;"> <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div> </div>
文本同步:属性是现代浏览器的可选,但在 Internet Explorer Quirks 模式中需要继承浏览器的支持。
其他回答
在以前的例子中,他们使用的边界: 0 自动,显示:表和其他答案使用“转换和翻译”。
每个人都知道有一个 <center> 标签,它只是不受 HTML5 支持,但它在 HTML5 中工作。
而且它正在工作,但现在不只是MDN Web Docs,但其他网站建议不要再使用它。 在这里,我可以使用你可以看到MDN Web Docs的笔记。 但无论如何,有这样的方式。
此分類上一篇
可以使用 CSS 3 Flexbox. 在使用 Flexbox 时,您有两种方法。
设置主显示:flex; 并将属性 {justify-content:center;,align-items:center;} 添加到您的主元素。
#outer { 显示: flex; justify-content: center; align-items: center; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
设置父母显示:flex 并将 margin:auto 添加到孩子身上。
#outer { 显示: flex; } #inner { margin: auto; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
CSS 3的盒子相匹配属性
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
使用下面的代码。
HTML
<div id="outer">
<div id="inner">Foo foo</div>
</div>
CSS
#outer {
text-align: center;
}
#inner{
display: inline-block;
}
我创建了这个例子,以表明如何垂直和水平地调整。
这个代码基本上就是这样:
#outer {
position: relative;
}
和...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
它会留在中心,即使你重新启动屏幕。