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

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

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

当前回答

如果你知道它的宽度,让我们说它是1200像素,去:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

因此,基本上它将添加50%的左边边,低于已知宽的一半。

其他回答

这对我工作:

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

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

<center>

我被最简单的中心所知道的混乱了吗?

</center>

我最近找到了一个方法:

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

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

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

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

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

您可以使用 CSS Flexbox 来实现这一点. 您只需要将 3 个属性应用到母元素,以便一切都工作。

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

看看下面的代码会让你更好地了解属性。

了解更多关于CSS Flexbox的信息

#outer { 显示: flex; align 标题: 中心; justify 内容: 中心; 边界: 1px 固体 #ddd; 宽度: 100%; 高度: 200px; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

推荐文章