在 CSS 中，讓文字居中對(duì)齊是很常見(jiàn)的需求。如果一個(gè)文本框過(guò)寬，文字居左將顯得松散而雜亂，而居右的則顯得緊湊且艱難。下面介紹幾種CSS技巧來(lái)使文字在盒子內(nèi)居中。

1. 文字在行內(nèi)塊元素中居中對(duì)齊
/* 關(guān)鍵代碼 */
display: inline-block;
text-align: center;
/* HTML代碼片段 */
<div class="box">
<span class="text">Hello world!</span>
</div>
/* CSS代碼片段 */
.box {
width: 200px;
height: 150px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.text {
display: inline-block;
vertical-align: middle;
}

上述 CSS 技巧運(yùn)用了 display: inline-block 和 text-align: center。當(dāng)我們將一個(gè)塊元素設(shè)為行內(nèi)塊元素后，使父元素的 text-align 屬性設(shè)置為 center 則可讓文本居中對(duì)齊。

2. 文字在 flex 布局中居中對(duì)齊
/* 關(guān)鍵代碼 */
display: flex;
justify-content: center;
align-items: center;
/* HTML代碼片段 */
<div class="box">
<span class="text">Hello world!</span>
</div>
/* CSS代碼片段 */
.box {
width: 200px;
height: 150px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.text {
display: inline-block;
vertical-align: middle;
}

Flex 是一個(gè)流行的 CSS 布局方式。使用 Flex 布局可以很容易地讓文本在父元素內(nèi)居中對(duì)齊。通過(guò)設(shè)置父元素為 flex，同時(shí)將 justify-content 和 align-items 屬性值都設(shè)置為 center，則可使文本同時(shí)在父元素內(nèi)水平和垂直居中對(duì)齊。

以上是兩種讓CSS文本在框內(nèi)居中的方法。通過(guò)這些CSS技巧，可以使文本在父元素內(nèi)垂直或水平或同時(shí)居中對(duì)齊，這為我們的前端開(kāi)發(fā)帶來(lái)了很大的便利。