CSS登錄界面排版通常需要使用居中技巧，以確保界面的美觀性和用戶體驗。下面我們來學習一下怎樣實現一個居中不動的CSS登錄界面。

html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.login-form {
width: 400px;
padding: 30px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 5px;
}
.form-input {
display: block;
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
.form-button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 4px;
}
.form-button:hover {
background-color: #0069d9;
}
@media (max-width: 480px) {
.login-form {
width: 100%;
padding: 20px;
}
}

以上是一個基本的CSS登錄界面代碼，主要使用了Flexbox布局實現居中效果，并且使用了媒體查詢來針對移動端做一些調整。具體實現步驟可以參考以下說明：

1. 首先，我們需要將html和body元素的高度設置為100%，以確保界面可以鋪滿整個屏幕。

2. 使用display: flex; align-items: center; justify-content: center;來實現頁面的水平和垂直居中效果。其中，align-items和justify-content分別控制行和列的對齊方式。

3. 接下來，創建一個.login-form的容器，來容納表單內容，并設置相應的寬度、內邊距、背景色、圓角、陰影等樣式。

4. 在.login-form中創建各個表單元素，如文本框、標簽、按鈕等，并設置相應的樣式。需要注意的是，文本框要設置為width: 100%;，才能在所有設備上正常顯示。

5. 最后，在@media (max-width: 480px)的媒體查詢中，對移動端樣式進行調整，使得表單可以在小屏幕設備上正常顯示。

綜上所述，以上代碼實現了一個基本的CSS登錄界面，并且使用了居中技巧來實現美觀和用戶體驗的目標。