如何使用CSS<div>
在另一个文件中水平居中<div>
?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
你可以将此CSS应用于内部<div>
:
#inner {
width: 50%;
margin: 0 auto;
}
当然,你不必将设置width
为50%
。小于包含宽度的任何宽度<div>
都可以使用。该margin: 0 auto
是什么呢实际定心。
如果你以Internet Explorer 8(及更高版本)为目标,最好改用以下方法:
#inner {
display: table;
margin: 0 auto;
}
它将使内部元素水平居中,并且无需设置特定的即可工作width
。
这里的工作示例:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
使用flexbox
div可以很容易地对div进行水平和垂直居中设置样式。
#inner {
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%;
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
要使div垂直居中对齐,请使用属性align-items: center
。
对于垂直居中,我通常使用“ line-height”(line-height == height)。这很简单,也很不错,但是只能处理一行内容的文本:)
您必须在HTML页面上使用!DOCTYPE标记才能使其在IE上正常运行。
请注意,可能有必要添加“ float:none;”。为#inner。
还将上边距和下边距设置为0,这是无关的。
margin-left: auto; margin-right: auto
我认为最好放。不一定
margin:0 auto
:margin: <whatever_vertical_margin_you_need> auto
第二个可能是水平边距。