2020-04-18

最近一直在苦恼关于div的垂直居中问题，试了好久终于得出几种较为有效得方式：

（1）利用子元素display：inline-block（这里也可以设置为table-cell,但是不建议。因为在实际项目中div作为父元素，子元素可能不止一种，如果将其变成单元格的形式会出现一些问题）与vertical:middle。加上父元素line-height等于父元素高度实现。

（2）利用定位得方式：子元素（position：abosulte），父元素（position：relative），并设置子元素的top,buttom,left,right,magrin.这是已知最常用的方式。

（3）利用外边距margin但是要对父元素与子元素的高度与宽度进行计算；并且设置子元素的内边距为0；防止影响计算距离。具体与上面类似，但是这种方式由于没有具体定位，只是单纯通过边距完成效果的，所以并不推荐