方法一：只用給父元素相對定位，子元素設寬高（畫素百分比都可以）
設margin:auto; 設定絕對定位；把四個值都設為0；
方法二： 父元素設定display:table-cell，vertical-align:middle;
子類設定 margin:0 auto;
方法三：父元素設定display: flex;
justify-content: center;/*主軸方向居中*/
align-items: center;/*交叉軸方向居中*/
方法4：父級display:flex(行內元素同樣適合於次方法)
子級：margin:auto
方法5:父級over-flow：hidden;
子級：position: relative;
margin: 0 auto;
top: 50%;
margin-top: -自身高度的一半;
方法3和4移動端首選
垂直居中的方式
1 文字垂直居中 單行文字的垂直居中只需要將元素的line height與height設定為相同即可。2 用margin auto 實現 在元素被絕對定位的情況下，margin auto 在垂直方向將不起作用。在使用margin auto 前先來區分兩個屬性，left與margin left lef...
垂直水平居中的四種方式
方案1 position 元素已知寬度 父元素設定為 position relative 子元素設定為 position absolute 距上50 據左50 然後減去元素自身寬度的距離就可以實現 效果圖 方案2 position transform 元素未知寬度如果元素未知寬度，只需將上面例子中的...
CSS實現垂直居中的4種思路
以前一直認為單行文字垂直居中要將高度和行高設定成相同的值，但高度其實沒必要設定。實際上，文字本身就在一行中居中顯示。在不設定高度的情況下，行高撐開高度。test style class test 測試文字div 設定父元素的display為table cell 通過為table cell元素設定ve...