CSS是網頁開發(fā)中必不可少的一部分，它可以幫助我們實現各種效果。今天，我想跟大家介紹一下如何實現文字平鋪居中的效果。

/*樣式代碼*/
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.text {
font-size: 16px;
color: #333;
background-color: #f5f5f5;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
text-align: center;
width: 50%;
height: 50%;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.text span {
width: 10%;
height: 10%;
box-sizing: border-box;
display: inline-block;
border: 2px solid #ccc;
margin: 1%;
}

上面是實現文字平鋪居中的CSS代碼，其中用到了flex布局。我們通過容器設置display: flex;可以將子元素水平排列，并且可以通過justify-content和align-items屬性來實現元素的水平和垂直對齊。接著，我們在文字塊中設置display: inline-flex;和flex-wrap: wrap;來讓每個文字塊都變成一行。接著再設置每個文字塊的寬度和高度，并設置box-sizing: border-box;來保證它們的大小不會被邊框撐開。最后，我們通過設置justify-content和align-items屬性讓文字塊水平和垂直居中。

在實際使用中，我們只需要在HTML文件中創(chuàng)建一個容器，其中包含多個文字塊即可實現此效果。如下所示：

ABCDEFGHIJKLMNO

如此，一個漂亮的文字平鋪居中的效果就實現了。