CSS Media Query移动端Flexbox登录表单居中适配问题求助

问题截图显示登录表单在移动端未实现居中，且尺寸未适配屏幕，以下是针对性的修复方案：

核心改动思路 #

• 抛弃原有的Table布局，改用Flexbox实现垂直+水平居中，更适配响应式场景
• 为表单容器设置最大宽度，避免大屏下过宽，小屏自动占满可用空间
• 使用相对单位（clamp()、百分比）定义字体、内边距、元素尺寸，增强自适应能力
• 优化输入框和按钮的响应式表现，确保在小屏上布局合理

修改后的完整代码 #

CSS 部分

<style lang="css" scoped>
/* 根容器：全屏Flex居中 */
.grp-login__grandParentContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* 占满视口高度 */
    background-color:#d7ffd9;
    font-size: clamp(18px, 2vw, 25px); /* 自适应字体大小 */
    padding: 20px; /* 避免内容贴屏幕边缘 */
    margin: 0;
}

.grp-login__parentContainer {
    background-color:#eaffd7;
    background-image: url('~@/assets/logosansnom.png');
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 80px; /* 给顶部logo预留空间 */
    width: 100%;
    max-width: 500px; /* 表单最大宽度限制 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grp-login__form {
    border: solid 2px black;
    padding: clamp(20px, 5vw, 50px);
    width: 100%;
    box-sizing: border-box; /* 内边距不影响容器宽度 */
}

/* 输入框容器样式 */
.grp-login__form__email,
.grp-login__form__password {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grp-login__form__email input,
.grp-login__form__password input {
    padding: 10px;
    font-size: inherit;
    border: solid 1px #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.grp-login__form__login__button {
    width: clamp(160px, 50%, 220px); /* 自适应按钮宽度 */
    height: clamp(40px, 8vw, 50px);
    border: none;
    outline: none;
    color: #fff;
    background: red;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    margin: 30px auto;
    font-size: inherit;
    display: block;
}

.grp-login__form__login__button:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.grp-login__form__login__button:active {
    color: red;
}

.grp-login__form__login__button:active:after {
    background: transparent;
}

.grp-login__form__login__button:hover:before {
    opacity: 1;
}

.grp-login__form__login__button:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: orange;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* 小屏微调 */
@media only screen and (max-width : 768px) {
  .grp-login__form {
    padding: 20px;
  }
}
</style>

HTML 部分

<div class="grp-login__grandParentContainer">
    <div class="grp-login__parentContainer">
        <form class="grp-login__form">
            <div class="grp-login__form__email">
                <label>Email </label>
                <input v-model="email" type="email">
            </div>
            <div class="grp-login__form__password">
                <label>Mot de passe </label>
                <input v-model="password" type="password">
            </div>
            <div class="grp-login__form__login">
                <button @click="goLogin" type="button" class="grp-login__form__login__button">Login</button>
            </div>
        </form>
        <div v-if="isError">Erreur de connexion</div>
    </div>
</div>

关键改动说明 #

1. Flexbox全屏居中：
   根容器通过display: flex配合justify-content和align-items实现表单在屏幕垂直、水平双向居中，min-height:100vh确保容器占满整个视口高度。

2. 自适应尺寸控制：
   使用clamp()函数定义字体、内边距、按钮尺寸，实现元素在不同屏幕尺寸下自动调整大小，同时为父容器设置max-width避免大屏下表单过宽。

3. 表单元素适配：
   输入框设置width:100%和box-sizing:border-box，确保占满表单宽度且内边距不会导致溢出；按钮设置为块级元素并居中，宽度随屏幕自适应。

4. 简化媒体查询：
   由于已使用自适应单位，媒体查询仅针对小屏做内边距微调，减少冗余代码。

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