首先，CSS 中的塊元素指的是那些默認(rèn)情況下會單獨占據(jù)一行或一組的元素，如 div、p 等。而居中顯示則是讓這些塊元素在其容器內(nèi)水平居中或垂直居中。 ## 水平居中 要讓一個塊元素水平居中，需要在其父級元素上設(shè)置 text-align:center，請看下面的代碼示例：

<style>
.parent {
text-align:center;
}
</style>
<div class="parent">
<p>我要水平居中顯示</p>
</div>

這樣，p 元素就會在其父元素（即 .parent 元素）內(nèi)水平居中顯示。 ## 垂直居中 塊元素的垂直居中較為復(fù)雜，需要一些其他的技巧。下面介紹兩種較常用的方法。 ### 方法一 這種方法需要在要垂直居中的塊元素上設(shè)置 display:table-cell 和 vertical-align:middle 兩個屬性。

<style>
.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
}
</style>
<div class="parent">
<p class="child">我要垂直居中顯示</p>
</div>

這里，.parent 元素被設(shè)置為 display:table，而 .child 元素被設(shè)置為 display:table-cell 和 vertical-align:middle。這些屬性的作用是將 .child 元素當(dāng)做表格單元格來處理，并將其在垂直方向上居中對齊。 ### 方法二 這種方法需要在要垂直居中的塊元素上設(shè)置 position:relative 和 top:50% 兩個屬性。

<style>
.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
transform:translateY(-50%);
}
</style>
<div class="parent">
<p class="child">我要垂直居中顯示</p>
</div>

這里，.parent 元素被設(shè)置為 position:relative，而 .child 元素被設(shè)置為 position:absolute、top:50% 和 transform:translateY(-50%)。這些屬性的作用是將 .child 元素的頂端定位在其父元素的中心點，然后再將其上移一半高度，即使其在垂直方向上居中對齊。 以上就是 CSS 塊元素的水平和垂直居中的實現(xiàn)方法。通過合適的設(shè)置，可以讓我們更好地控制布局和排版。