純css實現-讓字符串在文字少時顯示為居中對齊，而在文字多時顯示為左對齊
使用flex實現
思路
-
容器樣式（.container）:- Flex容器的BFC性質使得其內部的子元素（.text-box）在水平方向上能夠居中，通過
justify-content: center;實現。
- Flex容器的BFC性質使得其內部的子元素（.text-box）在水平方向上能夠居中，通過
-
文本框樣式（.text-box）:BFC阻止了文本框從Flex容器中溢出，確保文本框的背景顏色不會延伸到Flex容器之外。
在文本少時，子元素寬度等于文本長度，但父容器讓其居中，就表現出子元素中文本是居中的。
而文本多時，子元素寬度等于容器長度，雖然父容器也讓子元素居中，子元素也在父容器中居中了。不過子元素中文本向左對齊，于是用戶看到的就是子元素文本的向左對齊的表現形式。
源碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.container {display: flex;justify-content: center;margin: 10px 10%;background-color: blue;}.text-box {background-color: red;}</style></head><body><div class="container"><div class="text-box">文字少-居中對齊，文字多-左對齊|</div></div><div class="container"><div class="text-box">文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|</div></div></body>
</html>
使用text-align實現
思路
-
容器樣式（.container）:
- 使用
text-align: center;將容器內的文本內容在水平方向上居中對齊。
- 使用
-
文本框樣式（.text-box）:
- 使用
display: inline-block;將文本框設置為內聯塊，使其在容器中水平居中。 - 設置文本框的文本對齊方式為左對齊，通過
text-align: left;實現。
- 使用
在文本少時，子元素寬度等于文本長度，但父容器讓其居中，就表現出子元素中文本是居中的。
而文本多時，子元素寬度等于容器長度，雖然父容器也讓子元素居中，子元素也在父容器中居中了。不過子元素中文本向左對齊，于是用戶看到的就是子元素文本的向左對齊的表現形式。
源碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.container {text-align: center;background: skyblue;margin: 10px 10%;}.text-box {display: inline-block;text-align: left;background: yellow;}</style></head><body><div class="container"><div class="text-box">文字少-居中對齊，文字多-左對齊|</div></div><div class="container"><div class="text-box">文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|</div></div></body>
</html>
使用table布局實現
思路
-
文本框樣式（.text-box）:
- 使用
display: table;屬性將容器元素設為表格布局，使其具備表格的一些特性。 - 設置
margin: 10px auto;來實現水平方向上的居中效果。
- 使用
-
文本內容樣式（.text-content）:
- 使用
display: table-cell;屬性使文本內容元素具備表格單元格的特性，可以讓其在垂直方向上撐滿整個父元素。
- 使用
通過這些樣式的組合，實現了兩個不同大小的文本框，其中文本內容在第一個文本框中單行顯示并在水平方向上居中，而在第二個文本框中，文本內容可以多行顯示，仍然在水平方向上保持居中。表格布局的使用在這里能夠提供一些表格特性，同時 table-cell 元素的特性確保了垂直方向上的撐滿效果-撐滿時就是向左對齊的效果。
源碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.text-box {display: table;margin: 10px auto;background: skyblue;}.text-content {display: table-cell;background: red;}</style></head><body><div class="text-box"><div class="text-content"><p>文字少-居中對齊，文字多-左對齊|</p></div></div><div class="text-box"><div class="text-content"><p>文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|</p></div></div></body>
</html>
使用bfc實現
思路
-
容器樣式（.container）:正常的塊級元素，內部是正常的塊級作用域。 -
文本框樣式（.text-box）:width: fit-content;讓子元素有了一個與文本大小的寬度。margin: 0px auto;通過BFC讓其可以水平居中。
在文本少時，子元素寬度等于文本長度，但父容器讓其居中，就表現出子元素中文本是居中的。
而文本多時，子元素寬度等于容器長度，雖然父容器也讓子元素居中，子元素也在父容器中居中了。不過子元素中文本向左對齊，于是用戶看到的就是子元素文本的向左對齊的表現形式。
源碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.container {background-color: blue;margin: 10px 0px 0px 0px;}.text-box {margin: 0px auto;width: fit-content;background-color: red;}</style></head><body><div class="container"><div class="text-box">文字少-居中對齊，文字多-左對齊|</div></div><div class="container"><div class="text-box">文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|文字少-居中對齊，文字多-左對齊|</div></div></body>
</html>
