Flexbox垂直对齐不起作用[重复]答案

【问题标题】：Flexbox vertical alignment not working [duplicate]Flexbox垂直对齐不起作用[重复]
【发布时间】：2017-12-18 05:47:09
【问题描述】：

现在我的 div content 只是水平居中对齐，但我的目标是它也垂直对齐。我已经在 Mac 和 iOS 上的 Safari 和 Android 上的 Chrome 上进行了测试。

这是我的 CSS；

html, body {
    height: 100%;
}
body {
    background: #002560;
    background: linear-gradient(to bottom right, #002560, #0c182b);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    color: white;
}

我的 HTML 看起来像这样；

<div style="display:flex;align-items:center;justify-content:center;" id="content">
    <div>
        <h1>I'd love to be centre aligned correctly.</h1>
    </div>
</div>

这是我在 iOS（和其他平台）上看到的；

【问题讨论】：

您必须将 div 元素的高度设置为 100%。
@JulianEspinosa facepalm 感谢您了解这一点，我应该知道更多！

标签： html css flexbox vertical-alignment

【解决方案1】：

也许你可以增加高度。并且通常更容易在 css 中包含所有样式。

html, body {
  height:100%;
}

.height-100 {
  height: 100%;
}

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

body {
    background: #002560;
    background: linear-gradient(to bottom right, #002560, #0c182b);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    color: white;
}

<div class="height-100 center" id="content">
  <div>
        <h1>I'd love to be centre aligned correctly.</h1>
  </div>
</div>

【讨论】：

【解决方案2】：

您忘记在 #content div 上添加 height。检查下面更新的 sn-p...

html, body {
    height: 100%;
}
body {
    background: #002560;
    background: linear-gradient(to bottom right, #002560, #0c182b);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    color: white;
}
#content {
    height: 100%;
    width: 100%;
    text-align: center;
}

<div style="display:flex;align-items:center;justify-content:center;" id="content">
    <div>
        <h1>I'd love to be centre aligned correctly.</h1>
    </div>
</div>

【讨论】：

为什么要定位绝对？
在这种情况下，flexbox 已经做到了。如果没有 flexbox，你可能需要它。你甚至不需要 text-align: center
是的不需要绝对位置和其他css，指定高度就足够了
@Esko 没有height 你不能vertical align 单个元素。
@SuperUser 是的，你可以，flexbox 就是这样做的，你自己测试一下 height: 100%;

【解决方案3】：

您必须设置高度

html, body {
    height: 100%;
}
body {
    background: #002560;
    background: linear-gradient(to bottom right, #002560, #0c182b);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    color: white;
}

<div style="display:flex;align-items:center;justify-content:center;height:500px;width:100%;" id="content">
    <div>
        <h1>I'd love to be centre aligned correctly.</h1>
    </div>
</div>

【讨论】：

【解决方案4】：

使用 flex-container 的计算高度应用居中。在这种情况下，您应该明确设置它（默认情况下，正文带有内容的高度）。

body 也可以是你的弹性容器。因此，您可以删除额外的 div 包装器。

body {
    background: #002560;
    background: linear-gradient(to bottom right, #002560, #0c182b);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    color: white;
    
    height: 100vh;
    display: flex;
    
    /* Also you can apply this for common body layout */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

&lt;h1&gt;I'd love to be centre aligned correctly.&lt;/h1&gt;

【讨论】：