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

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

当前回答

将 CSS 添加到您的内部 div. 设置边界: 0 自动,并设置其宽度低于 100%,这是外部 div 的宽度。

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

这将带来所需的结果。

其他回答

您可以使用链接 https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}

参考 https://v4-alpha.getbootstrap.com/例子/覆盖/

只需将此 CSS 内容添加到您的 CSS 文件中,它将自动集中内容。

垂直调整到CSS中中心:

#outer {
    display: flex;
    justify-content: center;
}

垂直 + 垂直到中心在 CSS 中:

#outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

您可以添加此代码:

#inner { 宽度: 90%; margin: 0 auto; text-align:center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

这对我工作:

#inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

在此代码中,您将确定元素的宽度。

div{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

通常情况下,如果您正在使用DIV静态方式。

如果你想要一个Div集中在Div是绝对的父母,这里是例子:

.parentdiv{
    position: relative;
    height: 500px;
}

.child_div{
   position: absolute;
   height: 200px;
   width: 500px;
   left: 0;
   right: 0;
   margin: 0 auto;
}