最近一直在苦恼关于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;防止影响计算距离。具体与上面类似,但是这种方式由于没有具体定位,只是单纯通过边距完成效果的,所以并不推荐

网友评论