怎样才能垂直集中一个元素?

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

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

当前回答

更新 2022 中央元素垂直

1、使用 flexbox 垂直集中

要垂直集中一个像(div)这样的元素,需要将显示:flex 和正当内容:中心添加到元素 css 类。

<div class="center">
   <h1>I'm Horizontally center</h1>
</div>

.center{
   display:flex;
   justify-content:center;
}

二、使用边界的水平集中

下面的例子表明如何使用边界和宽度以水平为中心的元素。

.center{
    width:50%;
    margin:0 auto;
}

在上面的代码中,添加了宽度:50%和边缘:0自动,以便元素在左边和右边边之间平等分配可用的空间。

3、使用转型视角

下面的例子表明如何使用位置和转换属性以水平为中心的元素。

.center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

首先,添加位置:绝对,以便元素从正常文档流出。第二,我们添加左:50%,以便元素向前移动50%向x轴。第三,我们添加转换:translateX(-50%),以便元素向后返回50%并将其调整到中心。

其他回答

使用:

<div id="parent">
  <div class="child"></div>
</div>

风格:

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

如果你想把它集中在水平上,你应该写下如下:

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

我知道我稍晚回答这个问题,我没有打扰阅读每一个答案,所以这可能是一个重复。

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:

#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

这使得内部的DIV变成一个可以与文本平行集中的内线元素。

我已经应用了内线风格到内部 div. 使用此一个:

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">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/例子/覆盖/

推荐文章