我是网页设计的新手，所以请原谅我缺乏知识和可能提出的愚蠢问题。
我正在尝试创建一个登录页面，如下所示。
我已将用户名和密码表单放置在页面居中的 div 元素中。但是，我没有设法将用户名和密码字段正确居中放置在这个 div 元素中。 我试图通过将表单相对于页面中间的 div 元素居中并将登录名放在右下角来放置表单，但是它仍然不起作用。 此外，我无法将 header “SampleWebPage”正确放置在正确的位置。
这是放置表单的居中 div 类的 CSS 和 HTML 代码。
.login_div {
width: 300px;
height: 300px;
/* Center form on page horizontally & vertically */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}<html>
<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class = "login_div">
<form action="" method = "post" class="login_form">
Username:
<input type="text" name="username" value="{{
request.form.username }}">
<br>
Password:
<input type="password" name="password" value="{{
request.form.password }}">
<br>
<input class="btn btn-default" type="submit" value="Login">
</form>
</div>
</body>
</html>如果这是一个非常宽泛的问题，我很抱歉，但我需要帮助才能使该网页正常工作。
谢谢。
最佳答案
你可以使用 flexbox:
.login_div {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.row {
padding: 10px;
}
.row.submit {
text-align: right;
}<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class="login_div">
<form action="" method="post" class="login_form">
<div class="row">
<label>Username:
<input type="text" name="username" value="{{request.form.username}}">
</label>
</div>
<div class="row">
<label> Password:
<input type="password" name="password" value="{{request.form.password }}">
</label>
</div>
<div class="row submit">
<input class="btn btn-default" type="submit" value="Login">
</div>
</form>
</div>
</body>关于html - 为网站创建登录页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51750837/