本文目錄導讀：

1. 利用flexbox布局實現(xiàn)盒子居中
2. 利用grid布局實現(xiàn)盒子居中

CSS實現(xiàn)盒子居中

在CSS中，實現(xiàn)盒子的居中顯示有多種方法，利用flexbox布局和grid布局是兩種常見且實用的方法。

利用flexbox布局實現(xiàn)盒子居中

Flexbox是一種靈活的布局方式，可以輕松地實現(xiàn)盒子的居中顯示，在CSS中，可以通過設置display屬性為flex，并結合justify-content和align-items屬性來實現(xiàn)盒子的水平和垂直居中。

利用grid布局實現(xiàn)盒子居中

Grid布局是一種將頁面劃分為網(wǎng)格的布局方式，同樣可以實現(xiàn)盒子的居中顯示，在CSS中，可以通過設置display屬性為grid，并結合justify-content和align-items屬性來實現(xiàn)盒子的水平和垂直居中。

除了以上兩種方法，還可以利用position屬性將盒子定位為***定位或相對定位，然后通過top、left、right和bottom屬性來調(diào)整盒子的位置，實現(xiàn)居中顯示，但這種方法需要手動計算盒子的位置，相對于前兩種方法來說，實現(xiàn)起來更加復雜。

在實際應用中，可以根據(jù)具體的頁面需求和設計來選擇合適的布局方式，也可以結合使用多種布局方式，以實現(xiàn)更加復雜和靈活的頁面布局效果。