CSS固定上下居中顯示是前端開發中經常遇到的問題。這個問題的主要解決方案是使用position屬性和margin屬性。

.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上述代碼中，container是一個包含center元素的容器。設置container的position為relative是為了讓center元素相對于container定位。

center元素使用position:absolute定位，top和left值為50%，這表示它的左上角位于container的水平和垂直中心點。

使用transform屬性并設置translate值為-50%讓center元素水平和垂直方向上居中。注意這里的百分比是指自身的寬度和高度，不是相對于父元素的值。

實際應用中，除了單獨設置center元素為居中顯示，還可以在center元素內部包含其他元素，并使用text-align屬性來居中子元素的文本。

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

這種方法的優點在于，可以方便地處理不同寬度和高度的子元素居中顯示。

總之，在實際應用中，固定上下居中顯示是常見的需求，我們可以使用position和margin屬性來實現。需要注意的是，不同的居中方法適用于不同的場景，需要綜合考慮。