如何水平居中<div>？

Question

如何水平居中<div>？如何使用CSS <div>在另一个内部水平居中<div>？<div id="outer">    <div id="inner">Foo foo</div></div>

Answer 1

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

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

当然，您不必设置width为50%。任何小于包含的宽度<div>都可以。该margin: 0 auto是什么呢实际定心。

如果你的目标是IE8 +，那么最好改为：

#inner {
  display: table;
  margin: 0 auto;}

它将使内部元素水平居中，并且无需设置特定的工作width。

这里的工作示例：

#inner {

  display: table;

  margin: 0 auto;

}

<div id="outer" style="width:100%">

  <div id="inner">Foo foo</div>

</div>

Answer 2

如果您不想在内部设置固定宽度，div可以执行以下操作：

#outer {

  width: 100%;

  text-align: center;

}

#inner {

  display: inline-block;

}

<div id="outer">  

    <div id="inner">Foo foo</div>

</div>

Answer 3

我创建了这个例子来展示如何纵向和横向 align。

代码基本上是这样的：

#outer {
  position: relative;}

和...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;}

center当你重新调整屏幕大小时它会保持不变。