在前端開發(fā)中，經(jīng)常會遇到需要將文本、圖片或其他元素居中對齊的情況。這時候我們就需要學(xué)會使用 CSS 樣式來實現(xiàn)居中對齊。
一、文本居中對齊
如果我們想要將一段文本居中對齊，可以使用 text-align 屬性。

p {
text-align: center;
}

上面的代碼中，我們將 p 標(biāo)簽文本居中對齊，即實現(xiàn)了文字居中的效果。
二、圖片居中對齊
對于圖片的居中對齊，有多種方案可供選擇。以下是其中幾種實現(xiàn)方式。
1. display屬性
我們可以將圖片設(shè)置為 “display: block”，然后再將其“margin: auto”。

img {
display: block;
margin: auto;
}

2. flex布局
使用 flex 布局也可以實現(xiàn)圖片的居中對齊。

.wrapper{
display: flex;
justify-content: center;
align-items: center;
}

上面代碼中，我們使用了 display: flex 屬性使父元素成為 flex 容器，然后通過 justify-content 和 align-items 屬性將圖片水平和垂直居中。
三、其他元素居中對齊
對于其他元素的居中對齊，我們也可以使用上面提到過的 display: flex 方式。

.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 200px;
height: 100px;
}

上面的代碼中，我們使用了 display: flex 屬性將 .wrapper 設(shè)為 flex 容器，通過 justify-content 和 align-items 將元素居中。其中， .content 用來表示要居中的元素。
以上是 CSS 樣式中居中對齊的幾種方式，不同的應(yīng)用場景可以使用不同的方式來實現(xiàn)效果。