CSS可以實現各種各樣的效果，其中垂直居中元素是比較常見的需求之一。在登錄頁面中，我們希望將表單元素垂直居中，讓用戶填寫信息更加方便美觀。下面介紹一種使用CSS實現表單元素垂直居中的方法。

.login-form {
display: flex;
flex-direction: column;
justify-content: center; 
align-items: center; 
height: 100vh; 
}
.form-group {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.form-control {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-sizing: border-box;
outline: none;
}
.btn-submit {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

上面是一個簡單的登錄表單樣式，主要包括一個登錄表單容器、一個表單元素容器和幾個表單元素。其中最關鍵的是對登錄表單容器的樣式設置，具體解釋如下：

• display: flex;設置容器為彈性盒子
• flex-direction: column;設置彈性盒子為縱向排列
• justify-content: center;設置沿著主軸的對齊方式為居中
• align-items: center;設置沿著側軸的對齊方式為居中
• height: 100vh;設置容器高度為瀏覽器窗口高度

通過以上設置，登錄表單容器和表單元素容器就能夠在垂直方向上居中對齊了。其他的表單元素樣式可以根據需求自行調整。