最近我開始學習前端開發，其中一個重要的技能就是創建一個美觀的登錄頁面。實現登錄頁面的一個關鍵部分就是將登錄框居中。在HTML中，實現居中對齊最簡單的方法是使用CSS的flexbox布局。
下面是一個示例代碼，你可以把它粘貼到你的HTML文件中，然后使用你自己的樣式。
<html>
<head>
<style>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-box {
background-color: #EEE;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
border-radius: 3px;
border: none;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
button {
background-color: blue;
color: #FFF;
padding: 8px 12px;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-box">
<h2>用戶登錄</h2>
<form>
<div class="form-group">
<label>用戶名</label>
<input type="text" name="username">
</div>
<div class="form-group">
<label>密碼</label>
<input type="password" name="password">
</div>
<div class="form-group">
<button type="submit">登錄</button>
</div>
</form>
</div>
</div>
</body>
</html>