在網(wǎng)頁設計中，讓內容居中是非常重要的一部分。CSS提供了很多不同的方法來實現(xiàn)居中效果，這里我們就來介紹幾種比較常見的方式。

/* 水平居中文本或塊元素 */
.text-center {
text-align: center;
}
.block-center {
margin: 0 auto;
}
/* 垂直居中文本或塊元素 */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 垂直居中行內元素 */
.parent {
display: flex;
justify-content: center;
}
.child {
align-self: center;
}

首先是水平居中文本或塊元素。對于文本，我們可以將文本所在的容器元素的文字對齊方式設置為居中，即text-align: center；對于塊元素，則需要設置左右 margin 為 auto，這樣就可以自動布局居中。

接下來是垂直居中文本或塊元素。這里我們需要注意不同情況下的實現(xiàn)方式略有不同。對于塊元素，我們可以通過設置父元素為 flex 布局，并將 justify-content 和 align-items 均設置為 center，在子元素上設置 width 和 height 來實現(xiàn)居中。對于文本，我們也可以采用同樣的方式，講父元素設置為 flex 布局，但就不需要設置子元素的寬高，直接將文本放在子元素內就可以了。

最后是垂直居中行內元素。與垂直居中塊元素的方式類似，我們也需要為父元素設置為 flex 布局，并將 justify-content 設置為 center，在子元素上設置 align-self: center 即可實現(xiàn)行內元素的垂直居中。