CSS 居中顯示怎么設置？ CSS 居中是網頁設計中非常重要的一部分。在實現頁面布局時，我們經常會需要將某個元素水平或者垂直居中。在本篇文章中，我們將會介紹如何使用 CSS 實現居中顯示。 水平居中 我們可以使用以下的 CSS 代碼來將一個元素水平居中： ``` .parent { text-align: center; } .child { display: inline-block; } ``` 首先，我們為父元素（也就是容器）設置 `text-align` 屬性為 `center`。之后，我們為子元素（也就是要被居中的元素）設置 `display` 屬性為 `inline-block`。這樣就可以讓子元素成為一個行內塊元素，從而達到水平居中的效果。 垂直居中 在使用CSS實現垂直居中的時候，我們需要使用一些比較特殊的技術。以下是實現的方法示例： ``` .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } ``` 首先，我們為父元素設置 `position` 屬性為 `relative`。之后，我們為子元素設置 `position` 屬性為 `absolute`，并使用 `top: 50%;` 來讓它距離容器頂部的距離等于父元素高度的一半。最后，我們使用 `transform: translateY(-50%);` 來將子元素上移屏幕高度的一半，從而實現垂直居中的效果。 總結 在網頁設計中，居中是一個非常常用的功能。使用 CSS 實現居中的方法，可以幫助開發者減少很多不必要的麻煩。希望本文對您有所幫助。