您可以垂直调整任何元素,使用:

<div align=center>
    (code goes here)
</div>

或:

<!-- css here -->
    .center-me {
        margin: 0 auto;
    }

<!-- html here -->
    <div class="center-me">
        (code goes here)
    </div>

我只是建议使用正当内容:中心;当容器显示为 flex. 和文本平行:中心;当它是关于文本元素。

点击下面的代码并根据要求修改。

#content_block { 边界: 1px 固体黑色; padding: 10px; 宽度: 50%; 文本平衡:中心; } #container { 边界: 1px 固体红色; 宽度: 100%; padding: 20px; 显示: flex; justify-content: center; } <div id="container"> <div id="content_block"> Foo foo check</div> </div>

首先:你需要给第二 Div 一个宽度:

例如:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

请注意,如果你不给它一个宽度,它将采取整个线的宽度。

另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。

這裡有一個顯示水平和垂直調整的Fiddle。

更多信息可在Mozilla Developer Network上找到。

我最近找到了一个方法:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

两个元素必须是相同的宽度,以便正常运作。

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}