CSS中容器的居中一直是前端開發中需要面對的常見問題。這里介紹幾種常見的居中方式。 ## 水平居中 ### 1. margin: 0 auto 在容器的樣式中使用`margin: 0 auto`即可實現水平居中。 ```css .container { width: 200px; margin: 0 auto; } ``` ### 2. display: flex 在父容器中使用`display: flex`和`justify-content: center`即可實現子元素水平居中。 ```css .parent { display: flex; justify-content: center; } .child { width: 100px; } ``` ### 3. text-align: center 在父容器中使用`text-align: center`即可實現子元素水平居中，適用于文本和行內元素。 ```css .parent { text-align: center; } ``` ## 垂直居中 ### 1. display: flex 在父容器中使用`display: flex`和`align-items: center`即可實現子元素垂直居中。 ```css .parent { display: flex; align-items: center; } .child { height: 100px; } ``` ### 2. display: table-cell 在父容器中使用`display: table-cell`和`vertical-align: middle`即可實現子元素垂直居中。需要設置父容器`display: table`和`height`。 ```css .parent { display: table; height: 200px; } .child { display: table-cell; vertical-align: middle; } ``` ### 3. position + transform 在父容器中使用`position: relative`，子元素使用`position: absolute`和`transform: translate(-50%, -50%)`即可實現子元素垂直居中。 ```css .parent { position: relative; height: 200px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上就是常見的幾種CSS中容器居中的方式，具體可根據實際情況進行選擇。