1. 給元素絕對定位后，translate(-50%, -50%) ```css img { /* --居中-- */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 2. 父元素相對定位，子元素絕對定位，top, bottom, left, right 以及 margin都設置為0 ```css .parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } ``` 3. flex 布局方法，將父元素，display改為flex，align-item,和 justify-content設置為center ``` .parent { width: 200px; height: 200px; background-color: pink; display: flex; /\* 當 flex 橫向排列時，align-item 指的是垂直方向 \*/ align-items: center; /\* 當 flex 橫向排列時，justify-content 指的是橫向方向 \*/ justify-content: center; } .son { width: 100px; height: 100px; background-color: cadetblue; } ``` 4. gird 布局 ``` .parent { display: grid; align-item: center; justify-item: center; } ``` 5. table 布局 ``` .parent { display: table-cell; vertical-align: middle; vertical-align: center; } ```