在CSS中實現水平居中，會比較簡單。常見的，如果想實現inline元素或者inline-block元素水平居中，可以在其父級塊級元素上設置text-align: center實現；如果想實現塊級元素的水平居中對齊，可以設置magin: auto。而如果想實現垂直居中對齊，或許就不太容易。

以下，我總結了一些實現水平垂直居中對齊的一些方法。如果有什么不足之處，望指出。

水平垂直居中的實現可以分為兩大內容，一是高度隨內容自適應變化，一是固定高度。

最常用的方法是使用height + line-height的方式，設置同樣的值，配合text-align的使用，即可實現文本的水平垂直居中對齊

 div >
缺點：固定高度，無法實現兩行文本的垂直居中對齊
方法二
使用絕對定位的方法，配合margin負值使用。可以實現元素的水平垂直居中效果。
 div >
當然了，可以使用CSS3的calc函數簡化上面的CSS代碼
.container { position: absolute; left: calc(50% - 150px); top: calc(50% - 150px); width: 300px; height: 300px; border: 1px solid red;}
缺點：固定高度，高度無法自適應內容。元素脫離文檔流。
方法三
添加空標簽的方式，并且使該元素浮動，脫離文檔流，避免影響其他元素的布局。
 div >
缺點：這種方式下的垂直居中需要固定高度，無法實現內容自適應高度。同時，出現多余的空div元素。
高度自適應實現水平垂直居中方法一
CSS3中有transform屬性，此屬性下有一個translate移動函數，此函數接受兩個參數。如果兩個參數都為百分比值，此時會基于自身寬度和高定進行移動。此函數移動的機制同position:relative相似。
 div >
優點：無需定高度。高度隨內容自適應。
缺點：元素脫離文檔流。如果需要居中的元素已經在高度上超過了視口，那它的頂部會被視口裁切掉。
方法二
我們知道，可以使用margin來實現水平居中對齊，而無法使用margin實現垂直居中的原因在于margin的百分比值是基于寬度計算的。
 div >
上面代碼中，由于百分比是基于父元素（此時的父元素為body元素）的寬度計算的，所以此時的50%加上translate負值并不能實現垂直居中布局。
不過，CSS中存在一個vh（視口高度）,也就相當于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度，1vh=1%，即1vh等于視口高度的1%。vh單位的瀏覽器兼容性問題可看vh。因此，以上代碼可改為如下，即可實現水平垂直居中效果。
 div >方法三
CSS3中存在flex布局（伸縮布局盒模型，也叫彈性布局盒模型），對于flex熟悉的朋友來說，使用flex實現水平垂直居中是再簡單不過的了。
 div >
當我們使父元素display: flex時，margin: auto不僅可以水平居中，也能夠實現垂直居中。這是因為auto外邊距會平分水平或垂直方向上的額外空間。
當然，也可以使用justify-content: center來定義彈性項目主軸的對齊方式，align-items: center來定義彈性項目側軸的對齊方式。
 div >方法四
可以使用display: table來模擬表格，并給子元素設置display: table-cell，讓其成為表格的某個單元格，同時設置vertical-align: middle，即可實現垂直居中布局
 div >
使用此種方式，不需要固定高度。只需要給定任意高度或者不給高度，即可實現水平垂直居中效果。
以上就是CSS實現水平垂直居中的幾種方法介紹的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。