CSS 居中設置常常是書寫網頁時一個常見的需求，特別是對于元素的布局和定位，可以根據需要制定如何進行水平和垂直居中，下面我們來分析一下 CSS 如何實現居中設置。 一、水平居中 在進行水平居中設置時，可以使用 text-align屬性和 margin屬性。 1.text-align屬性 對于塊級元素來說，可以使用 text-align屬性進行水平居中設置。例如： p { text-align: center; } 該代碼即可使所有段落元素水平居中。 2.margin屬性 對于行內元素或者只有寬度的塊級元素來說，可以使用 margin屬性進行水平居中設置。例如： .pre { margin: 0 auto; width: 50%; } 該代碼則將元素 pre 進行水平居中，同時寬度為父元素的一半。 二、垂直居中 在進行垂直居中設置時，可以選擇使用 vertical-align屬性和 display屬性。 1.vertical-align屬性 該屬性適用于行內元素和表格單元格的垂直居中。例如： p { height: 200px; line-height: 200px; vertical-align: middle; } 該代碼即可使所有段落元素在高度為200px的容器中進行垂直居中設置。 2.display屬性 該屬性適用于塊級元素的垂直居中設置，需要將 display屬性設置為 table或者 table-cell。例如： .pre { display: table-cell; vertical-align: middle; height: 200px; } 該代碼會將元素 pre 轉換為表格單元格進行垂直居中設置。 綜上所述，通過以上方式可以輕松實現 CSS 的水平和垂直居中設置。