垂直居中的几种方式

一:元素在盒子中(假设盒子的高度为h):
1.父元素设置relative,子元素设置position:absolute; top:calc(50%-h/2);
2.父元素设置relative,子元素设置position:absolute; top:50%;margin-top:-h/2;
3.父元素设置relative,子元素设置position:absolute;top:50%;transform:translateY(-50%);或transform:translate(0px,-50%);
二:假设这个元素与另一个盒子或图片并排显示,可以给这个图片或这个元素设置vertical-align:middle;来使元素的对齐方式变为中线对齐,同时这个方法可以解决div中插入图片时下部分会有一小块的缝隙问题,原因就是因为图片和div默认的是基线对齐,div的基线不是最底部.解决方法是把vertical-align属性改成middle或者top,或者把图片改成display:block;