如何在HTML中垂直居中元素？Flex布局垂直居中失效求解决

问题描述 #

为容器设置Flex布局并添加align-items: center和justify-content: center后，元素仅实现水平居中，垂直居中未生效，需要修复该问题。

问题原因 #

1. 属性名笔误：容器的min-width: 100vh写错了属性，应该是控制高度的min-height，导致容器高度未按预期覆盖视口。
2. 父元素高度缺失：html和body默认高度由内容撑开，未设置为视口高度，导致容器的height: 100%没有有效参照，无法撑满屏幕。

解决方案 #

• 修正容器的高度属性，将min-width: 100vh改为min-height: 100vh，确保容器高度至少覆盖整个视口。
• 给html和body设置height: 100%，为容器的高度提供正确的参照。

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Josefin+Sans:wght@300;400;600&family=Montserrat:wght@500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    height: 100%; /* 为根元素设置高度，让子元素的百分比高度有参照 */
}

body{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
}

header{
    display: none;
}

.container{
    min-height: 100vh; /* 修正属性名，确保容器高度覆盖视口 */
    display: flex;
    align-items: center;
    justify-content: center;
}

效果说明 #

修改后，.container会撑满整个视口高度，Flex布局的align-items: center将正常生效，内部的.column1元素会同时实现水平和垂直居中。

内容的提问来源于stack exchange，提问作者Najad