0
点赞
收藏
分享

微信扫一扫

2020-04-18

墨春 2021-09-28 阅读 52

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

举报

相关推荐

0 条评论