前端開發中，CSS是不可或缺的一部分，它可以讓我們的網頁更加美觀、優雅，也可以讓我們實現許多比較復雜的功能。今天，我們來說說如何用CSS將登錄表單居中。

//HTML代碼
<div class="login">
<form action="#">
<label for="username">用戶名:</label>
<input type="text" id="username"><br>
<label for="password">密碼:</label>
<input type="password" id="password"><br>
<input type="submit" value="登錄">
</form>
</div>
//CSS代碼
.login {
width: 400px; /* 設置登錄表單的寬度 */
margin: 0 auto; /* 設置左右居中 */
text-align: center; /* 設置內部元素居中 */
}
.login form {
display: inline-block; /* 將表單變成內聯元素，使其居中 */
}
.login label {
display: inline-block; /* 設置label標簽為內聯元素，使其能和input元素放在同一行 */
width: 80px; /* 設置label標簽的寬度 */
text-align: right; /* 設置文字對齊方式為右對齊 */
margin-right: 20px; /* 設置label標簽和input元素之間的間距 */
}
.login input {
display: inline-block; /* 設置input元素為內聯元素 */
width: 200px; /* 設置輸入框的寬度 */
}
.login input[type="submit"] {
margin-top: 20px; /* 設置登錄按鈕和輸入框之間的間距 */
}

說明：我們通過調整元素的寬度、居中方式以及內部元素的對齊方式，最終實現了登錄表單的居中。其中要注意的是，設置margin: 0 auto只對block元素起作用，對于inline元素和inline-block元素則需要將其變成內聯元素后再通過text-align: center進行居中。另外，通過設置display為inline-block，我們可以讓元素既具有塊級元素的寬高特性，又具有內聯元素的排列特性。