我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?

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

当前回答

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

其他回答

您可以添加另一个具有相同尺寸的Div,并将其移动到左侧 -50%(半宽的Div)和50%的Div。

此分類上一篇: <div id="outer"> <div id="inner"><div>Foo foo</div></div> </div>

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

根据您的情况,最简单的解决方案可能是:

margin: 0 auto; float: none;

给内部 div 一些宽度,并添加 margin:0 auto; 在 CSS 属性中。

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

菲德尔