Flexbox中justify-content生效但align-items无效问题求助

问题分析 #

• Flex容器无有效交叉轴空间：align-items负责在Flex容器的交叉轴（默认是垂直方向）上对齐元素，但只有当容器在交叉轴方向存在多余空间时，这个属性才会显现效果。你的.login_container未设置高度，默认高度等于内容高度，交叉轴方向没有额外空间，因此align-items: center无法发挥作用。
• HTML标签语法错误：代码里存在两处标签闭合问题：<button>的闭合标签误写为</botton>，外层的两个<div>也未正确闭合，这可能导致浏览器解析布局时出现异常。

修复方案 #

1. 给Flex容器设置高度 #

根据布局需求为容器分配高度，比如要让内容在视口中垂直居中，可以给.login_container设置height: 100vh（占满整个视口高度）；如果是要在父容器#container内垂直居中，就给#container设置高度，再让子容器配合对齐。

2. 修正HTML标签错误 #

把错误的标签闭合修正，确保HTML结构合法。

修正后的代码 #

CSS代码 #

body{
    background-color: #354457;
    color: #fff;
    margin: 0; /* 清除body默认边距，避免影响高度计算 */
}
.title{
    margin-top: 30px;
}
#container{
    max-width: 150px;
    margin: 0 auto;
    height: 100vh; /* 让父容器占满视口高度 */
    display: flex;
    align-items: center; /* 父容器也可配合实现垂直居中 */
}
.login_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%; /* 子容器占满父容器宽度 */
}

HTML代码 #

<div id="container">
    <div class="login_container">
        <p class="title">WELCOME</p>
        <p class="subtitle">LET'S GET STARTED</p>
        <input type="text" value="" placeholder="Username" required>
        <input type="password" placeholder="Password">
        <button>Login</button>
    </div>
</div>

你也可以直接给.login_container设置height: 100vh，同样能让交叉轴获得足够空间，实现垂直居中效果：

.login_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

内容的提问来源于stack exchange，提问作者Rebecca.L