最近在專案中又用到了元素的垂直居中，在這裡整理總結一下可以實現元素垂直居中的幾種方法。
方法1:
利用line-height實現單行元素的垂直居中。
實現方法：將行內文字的line-height設定為父級元素的高度：
文字垂直居中
實現方式：
文字垂直居中
實現方式：子元素的設定top,bottom,left,right為0，margin設定為auto，當子元素嘗試向父元素的四個方向的距離為0時，自身的寬高不夠，剩餘部分利用margin:auto自動填充，從而實現垂直水平居中。
文字垂直居中文字垂直居中文字垂直居中
實現方式：將top,left分別設定50%,相對于父元素偏移一半，然後設定自身的位移為-50%,-50%，設定自身反方向偏移一半。
垂直居中
實現方式：
垂直居中
實現方式：通過百分比設定子元素的寬和高，通過計算偏移量得出使子元素居中的距離。
垂直居中
CSS實現元素垂直居中
對元素的垂直居中針對於單行元素和多行元素將分情況討論。父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html結構 hello world css樣式 對於父元素高度不確定的文字 等的塊級元素的豎直居中可以設定相同的上下內邊距 ...
CSS 元素垂直居中的幾種方式
目錄 1.vertical align line height 2.flex 常用 3.display absolute transform 4.margin auto display flex margin auto display absolute margin auto 5.table cel...
CSS實現元素水平垂直居中的幾種方式
doctype html en utf 8 viewport content width device width,initial scale 1.0 document title box1,box2 box1 1.box2 1 style head box1 box1 1 div div box2...