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

1. 水平居中
2. 垂直居中

CSS布局中的文字居中顯示技巧

水平居中

在CSS布局中，實(shí)現(xiàn)文字的水平居中顯示是常見的需求，可以通過(guò)以下方法實(shí)現(xiàn)：

1、使用text-align: center;屬性

對(duì)于塊級(jí)元素（如<div>、<p>等），可以直接設(shè)置text-align: center;來(lái)實(shí)現(xiàn)文字的水平和垂直居中。

div {
  text-align: center;
}

2、利用flex布局

對(duì)于使用flex布局的容器，可以通過(guò)設(shè)置justify-content: center;來(lái)實(shí)現(xiàn)文字的水平和垂直居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
}

垂直居中

文字的垂直居中相對(duì)復(fù)雜一些，可以通過(guò)以下方法實(shí)現(xiàn)：

1、利用line-height屬性

對(duì)于單行文本，可以通過(guò)設(shè)置合適的line-height來(lái)實(shí)現(xiàn)垂直居中。

div {
  height: 50px; /* 設(shè)置固定高度 */
  line-height: 50px; /* 與高度相同 */
}

2、使用CSS Grid布局或Flex布局結(jié)合transform屬性

對(duì)于復(fù)雜布局，可能需要結(jié)合CSS Grid布局或Flex布局以及transform屬性來(lái)實(shí)現(xiàn)文字的垂直居中，使用flex布局時(shí)，可以同時(shí)設(shè)置justify-content和align-items屬性來(lái)實(shí)現(xiàn)水平和垂直居中，對(duì)于Grid布局，可以使用align-content屬性來(lái)實(shí)現(xiàn)多行文本的垂直居中，這些方法的實(shí)現(xiàn)相對(duì)復(fù)雜，需要根據(jù)具體需求進(jìn)行選擇，通過(guò)合理的CSS布局和屬性設(shè)置，可以輕松實(shí)現(xiàn)文字的居中顯示，在實(shí)際開發(fā)中，可以根據(jù)具體需求和場(chǎng)景選擇合適的方法來(lái)實(shí)現(xiàn)文字的居中顯示。