2020-04-18

作者: 会飞翔的小猪 | 来源:发表于2020-04-18 20:29 被阅读0次

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

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

(1)

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

(2)

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

(3)

相关文章

网友评论

    本文标题:2020-04-18

    本文链接:https://www.haomeiwen.com/subject/wnnnvhtx.html