在CSS中，z-index是一個非常重要的屬性，可以控制元素在z軸上的層級。使用z-index屬性，可以讓前景元素顯示在背景元素的上面或下面，從而控制頁面上的顯示效果。

當元素使用z-index屬性進行層級控制時，只有處于同一個層級的元素才會相互影響，不同層級之間的元素不會相互影響。因此，層級的設置非常關鍵，一個不合理的層級設置可能會造成頁面顯示混亂或不符合預期的效果。

在實際應用中，經常會遇到需要居中顯示的元素，比如對話框、提示框等。這時候，可以使用z-index屬性進行層級控制，并結合CSS3的transform屬性來實現元素的居中顯示。

下面是一個例子，通過z-index和transform屬性實現對話框的居中顯示：

.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 5;
}

在上述代碼中，.dialog是對話框的樣式，設置了position為fixed，并在top和left屬性中分別設置為50%，將對話框定位到頁面中央。通過transform屬性的translate方法來實現垂直和水平方向的居中。

.mask是遮罩層的樣式，用來遮擋頁面中間的內容。通過設置position為fixed，并在top、left、right、bottom屬性中設置為0，將遮罩層充滿整個頁面。這里z-index設置為5，比對話框的層級低，以便將對話框放在遮罩層之上。

通過z-index和transform屬性的配合，我們可以輕松地實現各種元素的居中顯示效果，讓頁面顯示更加美觀和易讀。