垂直居中的几种方式

一:元素在盒子中(假设子盒子的高度为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%);
4.父元素设置display:table-cell;(将父元素变为表格元素)子元素vertical-align:middle;(使元素和父元素的中线对齐)
5.计算这个元素的高度,用margin计算来居中(用margin-top和margin-bottom来设置)
6.伸缩布局:父元素设置display:flex,align-items:center;沿侧轴居中对齐(单行用的比较多)
7.对应于伸缩盒子多行垂直居中:align-content属性 条件:父元素display:flex; 必须设置flex-direction:row;并且设置换行:flex-wrap:wrap;才起作用 然后设置 align-content:center;即可多行居中
二:假设这个元素与另一个盒子或图片并排显示,可以给这个图片或这个元素设置vertical-align:middle;或vertical-align:top;来使元素的对齐方式变为中线对齐,同时这个方法可以解决div中插入图片时下部分会有一小块的缝隙问题,原因就是因为图片和div默认的是基线对齐,div的基线不是最底部.解决方法是把vertical-align属性改成middle或者top,或者把图片改成display:block;