CSS align-items 在 flexbox 中调整内容时不起作用答案

【问题标题】：CSS align-items not working while justify-content working in flexboxCSS align-items 在 flexbox 中调整内容时不起作用
【发布时间】：2023-02-23 16:50:11
【问题描述】：

body{
    background-color: #354457;
    color: #fff;
}
.title{
    margin-top: 30px;
}
#container{
    max-width: 150px;
    margin: 0 auto;
}
.login_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

<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>
        <br>
        <input type="password" placeholder="Password">
        <br>
        <button>Login</botton>
    <div>
<div>

当我使用 flexbox 时，我不知道为什么它的属性不起作用。似乎“证明内容”有效，但“对齐项目”无效。谁能帮我吗？

【问题讨论】：

你想让它居中在屏幕中间吗？什么不起作用？

标签： html css

【解决方案1】：

#container {
    max-width: 150px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: space-around;
    gap: 0;
    position: relative;
}
.login_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* gap: 0; */
    height: max-content;
    margin: auto;
}
body{
    background-color: #354457;
    color: #fff;
}
.title{
    margin-top: 30px;
}

<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>
        <br>
        <input type="password" placeholder="Password">
        <br>
        <button>Login</botton>
    <div>
<div>

【讨论】：