CSS中水平居中對齊是前端開發(fā)中常見的需求之一。下面將介紹常用的幾種水平居中對齊的方式。

/* 第一種方式：使用text-align */
.container {
text-align: center;
}
.container img {
display: inline-block;
/* 這里如果是塊級元素，需要設置寬度 */
}

第一種方式是通過設置父容器的text-align屬性為center實現(xiàn)水平居中。因為文本默認是行內(nèi)元素，所以圖片需要設置display為inline-block。

/* 第二種方式：使用margin */
.container {
position: relative;
width: 300px;
height: 300px;
background-color: #ccc;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

第二種方式是通過相對定位和絕對定位實現(xiàn)圖片水平居中。首先需要設置父容器的position屬性為relative，然后設置圖片的position為absolute，top和left屬性為50%，最后使用transform屬性移動圖片到中心點。

/* 第三種方式：使用flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
}

第三種方式是使用flexbox實現(xiàn)水平居中。通過設置display為flex，然后使用justify-content和align-items屬性來實現(xiàn)容器內(nèi)元素的水平和垂直居中。