本文目錄導讀：

1. 塊級元素的水平居中
2. 使用Flexbox布局實現水平居中

CSS布局中的水平居中顯示技巧

在CSS中，實現文本內容的水平居中顯示是一個常見的需求，我們可以通過設置文本元素的text-align屬性為center來實現。

.text-center {
  text-align: center;
}

只需將上述樣式應用到需要居中的文本元素上即可實現水平居中效果，這種方法適用于文本內容，包括文字、鏈接等。

塊級元素的水平居中

對于塊級元素（如<div>、<p>等），實現水平居中顯示則需要考慮更多的因素，因為塊級元素會占據整個容器寬度，這時，我們可以使用CSS的margin屬性結合auto值來實現水平居中。

.block-center {
  margin-left: auto; /* 左右邊距自動調整 */
  margin-right: auto; /* 左右邊距自動調整 */
}

為了使塊級元素根據容器寬度自動調整左右邊距以實現居中效果，通常需要設置該元素的寬度（width），這種方法適用于固定寬度的塊級元素，對于響應式布局中的容器寬度不固定的情況，可以結合媒體查詢（Media Queries）來實現不同情況下的水平居中。

使用Flexbox布局實現水平居中

現代前端開發(fā)中，Flexbox布局是一種非常流行的布局方式，可以輕松實現元素的水平居中顯示，通過設置父元素為Flex容器，并使用justify-content: center;屬性即可實現子元素的水平居中。

.flex-container {
  display: flex; /* 啟用Flex布局 */
  justify-content: center; /* 子元素水平居中 */
}

這種方法適用于任何類型的元素，無論是文本還是塊級元素，且支持響應式布局，Flexbox布局還提供了更多的靈活性和控制選項，可以方便地實現復雜的布局需求。