CSS – 如何在另一个div中水平居中?

如何使用CSS将水平居中的<div>另一个<div>(如果甚至可能的话)?

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

你可以将这个CSS应用到内部<div>

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

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

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

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

这使得内部div成为一个可以居中的内联元素text-align


最好的方法是用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;
}

详细了解如何集中子元素

这也解释了为什么盒模型是最好的办法

Tags:, ,

添加评论

友情链接:蝴蝶教程