面試中不管是筆試題還是面試題，一般很容易被問到如何實現垂直水平居中，這里總結四種方法作為參考

(1)margin:auto法

css: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } html: <div> <img src="mm.jpg"> </div>

定位為上下左右為0，margin：0可以實現脫離文檔流的居中.

(2)margin負值法

.container{ width: 500px; height: 400px; border: 2px solid #379; position: relative; } .inner{ width: 480px; height: 380px; background-color: #746; position: absolute; top: 50%; left: 50%;

margin-top: -190px; /*height的一半*/

margin-left: -240px; /*width的一半*/

}

補充：其實這里也可以將marin-top和margin-left負值替換成，
transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脫離文檔流的）

設置父元素的display:table-cell,并且vertical-al

總結

以上是生活随笔為你收集整理的CSS常见的四种垂直居中的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。