在 CSS 中，讓文字居中對齊是很常見的需求。如果一個文本框過寬，文字居左將顯得松散而雜亂，而居右的則顯得緊湊且艱難。下面介紹幾種CSS技巧來使文字在盒子內居中。

1. 文字在行內塊元素中居中對齊
/* 關鍵代碼 */
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 技巧運用了 display: inline-block 和 text-align: center。當我們將一個塊元素設為行內塊元素后，使父元素的 text-align 屬性設置為 center 則可讓文本居中對齊。

2. 文字在 flex 布局中居中對齊
/* 關鍵代碼 */
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 是一個流行的 CSS 布局方式。使用 Flex 布局可以很容易地讓文本在父元素內居中對齊。通過設置父元素為 flex，同時將 justify-content 和 align-items 屬性值都設置為 center，則可使文本同時在父元素內水平和垂直居中對齊。

以上是兩種讓CSS文本在框內居中的方法。通過這些CSS技巧，可以使文本在父元素內垂直或水平或同時居中對齊，這為我們的前端開發帶來了很大的便利。