Warm tip: This article is reproduced from serverfault.com, please click

html-如何将元素水平居中

(html - How to horizontally center an element)

发布于 2008-09-22 12:27:57

如何使用CSS<div>在另一个文件中水平居中<div>

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Questioner
Unknown
Viewed
0
community wiki 2021-01-23 14:05:56

你可以将此CSS应用于内部<div>

#inner {
  width: 50%;
  margin: 0 auto;
}

当然,你不必将设置width50%小于包含宽度的任何宽度<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>

编辑

使用flexboxdiv可以很容易地对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