html - 当使用媒体查询以不同的屏幕尺寸查看时，如何使响应式右对齐登录框居中？

Question

我制作了一个带有右对齐登录框的响应式登录表单，但我希望我的登录框使用 CSS 媒体查询在不同屏幕尺寸的中心显示。

我当前的 CSS 代码是:

enter code here 
.login {  
position: absolute;  
top: 8em;   
right: 5vw;  
}  
.login-card {  
    min-width: 20vw;  
    max-width: 25em;  
    min-height: 20vh;  
    max-height: 25em;}    

Answer 1

如果将登录框的父元素的显示声明为flex，则可以将登录框的正常显示位置设置在右手边，使用:

justify-content: flex-end;

并编写一个@media 查询，其中的值更改为:

justify-content: center;

工作示例:

body {
background-color: rgb(191, 191, 255);
}

section {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 24px 12px;
background-color: rgb(163, 163, 255);
box-shadow: 0 0 6px rgb(0, 0, 0);
}

form.login {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 88px auto;
grid-row-gap: 6px;
width: 240px;
padding: 12px;
font-family: arial, helvetica, sans-serif;
color: rgb(255, 255, 255);
background-color: rgb(95, 95, 255);
}

@media only screen and (max-width: 900px) {

section {
justify-content: center;
}

}

<section>
<form class="login">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="username" placeholder="Username" />


<label for="password">Password:</label>
<input type="text" name="password" id="password" class="password" placeholder="Password"/>
</form>
</section>

<p>On a narrower screen, the login box appears in the center.<br />
Try switching to <strong>Full page</strong>, to see the login box move over to the right hand side.