本文目錄導(dǎo)讀：

1. 水平居中對(duì)齊
2. 垂直居中對(duì)齊
3. 綜合應(yīng)用：文字在盒子中的居中顯示

CSS布局技巧：文字居中對(duì)齊的實(shí)現(xiàn)方法

水平居中對(duì)齊

在CSS中，實(shí)現(xiàn)文字的水平居中對(duì)齊是常見的需求，我們可以通過以下方式實(shí)現(xiàn)：

1、使用text-align屬性

對(duì)于塊級(jí)元素（如<div>、<p>等），我們可以使用text-align屬性來實(shí)現(xiàn)文字的水平和垂直居中對(duì)齊。

div {
  text-align: center;
}

這將使<div>元素內(nèi)的文本水平居中對(duì)齊。

2、使用Flexbox布局

對(duì)于更復(fù)雜的布局，我們可以使用Flexbox布局來實(shí)現(xiàn)文字的水平居中對(duì)齊。

.container {
  display: flex;
  justify-content: center;
}

這將使容器內(nèi)的子元素在水平方向上居中對(duì)齊。

垂直居中對(duì)齊

文字的垂直居中對(duì)齊相對(duì)復(fù)雜一些，我們可以采用以下方法：

1、使用line-height屬性

對(duì)于單行文本，我們可以通過設(shè)置line-height屬性等于容器的高度來實(shí)現(xiàn)文字的垂直居中對(duì)齊。

div {
  height: 100px;
  line-height: 100px;  /* 與高度相同 */
}

這將使單行文本在<div>元素中垂直居中對(duì)齊。

2、使用Flexbox布局或Grid布局

對(duì)于多行文本或更復(fù)雜的布局，我們可以使用Flexbox布局或Grid布局來實(shí)現(xiàn)文字的垂直居中對(duì)齊，使用Flexbox布局：

.container {
  display: flex;
  align-items: center; /* 垂直居中對(duì)齊 */
}

綜合應(yīng)用：文字在盒子中的居中顯示

當(dāng)需要同時(shí)實(shí)現(xiàn)水平和垂直居中對(duì)齊時(shí)，可以將上述方法結(jié)合使用，使用Flexbox布局同時(shí)實(shí)現(xiàn)水平和垂直居中對(duì)齊：

.container {
  display: flex;
  justify-content: center; /* 水平居中對(duì)齊 */
  align-items: center; /* 垂直居中對(duì)齊 */
  height: 100vh; /* 設(shè)置容器高度為視窗高度的100% */
}

通過靈活運(yùn)用CSS的各種布局技巧和屬性，我們可以輕松實(shí)現(xiàn)文字的居中對(duì)齊。