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

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

当前回答

试着和周围玩

margin: 0 auto;

如果你也想集中你的文本,试着使用:

text-align: center;

其他回答

中心的主要属性是边界:自动和宽度:根据要求:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

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

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

margin: 0 auto; float: none;

这个方法也很好地工作:

div.container {
  display: flex;
  justify-content: center; /* For horizontal alignment */
  align-items: center;     /* For vertical alignment   */
}

对于内部<div>,唯一的条件是其高度和宽度不应大于其容器的高度。

#outer { 显示: 网; justify- 内容: 中心; } <div id="outer"> <div id="inner">hello</div> </div> 在这里输入代码