在前端開發中，居中元素是一個很常見的需求。而使用CSS來實現居中是一種較為便捷和靈活的方式。下面，我結合實例來為大家介紹CSS如何實現居中。 水平居中 1、居中的元素為塊級元素 我們可以使用margin屬性來實現塊級元素的水平居中。具體做法是：將左右margin值都設為auto。代碼如下：

p{
margin: 0 auto;
}

2、居中的元素為內聯元素 我們可以將元素的display屬性設置為inline-block，再將父元素的text-align屬性設置為center來實現內聯元素的水平居中。代碼如下：

p{
display: inline-block;
}
.parent {
text-align: center;
}

垂直居中 1、單行文本居中 對于只有一行文本的元素，我們可以使用line-height屬性實現垂直居中。將行高設為元素的高度即可。具體代碼如下：

p{
height: 50px;
line-height: 50px;
}

2、多行文本居中 對于多行文本，我們可以結合使用關鍵屬性。具體做法是將元素的display屬性設置為table-cell，再將父元素的display屬性設置為table，使其表現出表格的特性。 同時，還需設置垂直方向上的對齊方式。例如，將vertical-align屬性設為middle。代碼如下：

.parent {
display: table;
}
p{
display: table-cell;
vertical-align: middle;
}

當然，以上僅是實現居中的一些常用方式，具體需要根據實際情況來選擇適合的方式。