css垂直居中的方法总结

(1)通过vertical-align:middle实现CSS垂直居中，vertical生效的前提是元素的display:inline-block；

(2)通过display:flex;align-items:center实现CSS垂直居中；

(3)通过父元素display:table;子元素display:table-cell;vertical-align:middle实现子元素内垂直居中;

(4)通过父元素position: relative;子元素position: absolute;top:50%;margin-top:子元素高度的一半；实现垂直居中；

(5)通过父元素position: relative;子元素position: absolute;top:50%;transform:translateY(-50%);实现垂直居中；

(6)通过height:100px;line-height:100px实现CSS垂直居中；