本文目錄導(dǎo)讀：

1. 塊級(jí)元素的水平居中對(duì)齊
2. 塊級(jí)元素的垂直居中對(duì)齊

CSS實(shí)現(xiàn)內(nèi)容居中對(duì)齊的方法

在CSS中，實(shí)現(xiàn)文本內(nèi)容的居中對(duì)齊主要涉及到兩個(gè)屬性：text-align，當(dāng)你想讓文本在一行內(nèi)居中對(duì)齊時(shí)，你可以將父元素的text-align屬性設(shè)置為center。

.container {
  text-align: center;
}

這樣，.container內(nèi)的所有文本內(nèi)容都會(huì)水平居中對(duì)齊。

塊級(jí)元素的水平居中對(duì)齊

對(duì)于塊級(jí)元素（如<div>），要實(shí)現(xiàn)水平居中對(duì)齊，需要同時(shí)使用到margin和auto值，這需要先將塊級(jí)元素的display屬性設(shè)為block或inline-block，然后左右邊距設(shè)為自動(dòng)：

.block-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

塊級(jí)元素的垂直居中對(duì)齊

對(duì)于塊級(jí)元素的垂直居中對(duì)齊，CSS并沒(méi)有直接的屬性可以實(shí)現(xiàn)，但可以通過(guò)一些技巧實(shí)現(xiàn)，如利用定位（positioning）和轉(zhuǎn)換（transform）。

.vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

這樣可以將元素在垂直方向上居中，注意這種方法需要知道元素的高度，并且父元素需要相對(duì)定位，還有其他方法如利用flexbox或grid布局等也可以實(shí)現(xiàn)垂直居中對(duì)齊。

CSS提供了多種方式來(lái)實(shí)現(xiàn)內(nèi)容居中對(duì)齊，包括文本內(nèi)容的居中對(duì)齊、塊級(jí)元素的水平居中對(duì)齊以及塊級(jí)元素的垂直居中對(duì)齊，熟練掌握這些方法可以幫助我們更好地進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)。