html div中水平居中,如何在另一个<div>中水平居中<div>？

我怎么能水平居中一个

另一个内

使用CSS(如果它甚至有可能)？

Foo foo

您可以将此CSS应用于内部

：#inner {

width: 50%;

margin: 0 auto;

}

当然，您不必将width设置为50% 。 任何小于包含

宽度都可以工作。 margin: 0 auto是什么实际居中。

如果您的目标是IE8 +，则可以更好地使用它：#inner {

display: table;

margin: 0 auto;

}

它将使内部元素水平居中并且它不需要设置特定的width就可以工作。

工作示例：

#inner {

display: table;

margin: 0 auto;

}

Foo foo

如果你不想在内部div上设置固定宽度，你可以这样做：

#outer {

width: 100%;

text-align: center;

}

#inner {

display: inline-block;

}

Foo foo

最好的方法是用CSS 3。

盒子型号：#outer{

width: 100%;

/* Firefox */

display: -moz-box;

-moz-box-pack: center;

-moz-box-align: center;

/* Safari and Chrome */

display: -webkit-box;

-webkit-box-pack: center;

-webkit-box-align: center;

/* W3C */

display: box;

box-pack: center;

box-align: center;

}

#inner{

width: 50%;

}

根据你的可用性，你也可以使用box-orient, box-flex, box-direction属性。

Flex ：#outer {

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}

详细了解如何集中子元素

链接2

链接3

链接4

这就解释了为什么盒子模型是最好的方法 ：

为什么认为W3C盒子模型更好？

链接地址: http://www.djcxy.com/p/223.html