## 如何居中 div？ -水平居中：給 div 設置一個寬度，然后添加 margin:0 auto 屬性 ```css div { width: 200px; margin: 0 auto; } ``` -水平居中，利用 text-align:center 實現 ```css .container { background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; } ``` -讓絕對定位的 div 居中 ```css div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /*方便看效果*/ } ``` -水平垂直居中一 ```css /*確定容器的寬高寬500高300的層設置層的外邊距div{*/ position: absolute;/*絕對定位*/ width: 500px; height: 300px; top: 50%; left: 50%; margin: -150px00-250px;/*外邊距為自身寬高的一半*/ background-color: pink;/*方便看效果*/ } ``` -水平垂直居中二 ```css /*未知容器的寬高，利用`transform`屬性*/ div { position: absolute; /*相對定位或絕對定位均可*/ width: 500px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /*方便看效果*/ } ``` -水平垂直居中三 ```css /*利用flex布局實際使用時應考慮兼容性*/ .container { display: flex; align-items: center; /*垂直居中*/ justify-content: center; /*水平居中*/ } .containerdiv { width: 100px; height: 100px; background-color: pink; /*方便看效果*/ } ``` -水平垂直居中四 ```css /*利用text-align:center和vertical-align:middle屬性*/ .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container::after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; white-space: normal; vertical-align: middle; } ``` 回答： ``` 一般常見的幾種居中的方法有： 對于寬高固定的元素 （1）我們可以利用margin:0 auto來實現元素的水平居中。 （2）利用絕對定位，設置四個方向的值都為0，并將margin設置為auto，由于寬高固定，因此對應方向實現平分，可以實現水 平和垂直方向上的居中。 （3）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過margin負值來調整元素 的中心點到頁面的中心。 （4）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過translate來調整元素 的中心點到頁面的中心。 （5）使用flex布局，通過align-items:center和justify-content:center設置容器的垂直和水平方向上為居中對 齊，然后它的子元素也可以實現垂直和水平的居中。 對于寬高不定的元素，上面的后面兩種方法，可以實現元素的垂直和水平的居中。 ```