在前端開發中，CSS是實現頁面布局的基礎之一。而元素的居中顯示是布局中非常基礎的一種操作。本文將介紹如何使用CSS實現多個元素的居中顯示。

/* 使用flex布局 */
.container{
display: flex;
justify-content: center;
align-items: center;
}
/* 使用text-align屬性 */
.container{
text-align: center;
}
.container div{
display: inline-block;
/* 防止inline-block元素間出現空隙 */
zoom: 1;
*display: inline;
}

以上兩種方法均可實現多個元素的居中顯示。

使用flex布局

將需要居中顯示的元素包裹在一個容器中，為容器設置display屬性為flex，同時使用justify-content和align-items屬性進行水平和垂直居中。代碼示例：

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

使用text-align屬性

將需要居中顯示的元素包裹在一個容器中，為容器設置text-align屬性為center，同時為元素設置display為inline-block。代碼示例：

<div class="container">
<div></div>
<div></div>
<div></div>
</div>
.container{
text-align: center;
}
.container div{
display: inline-block;
}

總結：以上兩種方法均可實現多個元素的居中顯示，使用flex布局可以更精確地控制元素的位置和排列方式，而使用text-align屬性可以更簡潔地實現基本的居中顯示效果。