CSS:BFC,块级元素居中

时间:2020-01-15 20:05:21   收藏:0   阅读:24

1.BFC

BFC的英文全称是block formatting context,即格式化上下文,当元素触发BFC时会变成一个独立的环境。这里列举一个触发BFC的方法,在父级元素加入overflow:hidden;其适用场景有:(1)为父级找高(2)子级margin-top将父级一起往下带(3)兄弟级元素浮动后影响其他元素,将受影响的元素触发BFC变成独立环境

2.可以触发BFC的元素:

(1)根元素

(2)float

(3)overflow:auto.scroll.hidden

(4)display:flex.table-cell.table-caption.inline-block.inline-flex

(5)position:absolute.fixed.relative

3.块级元素水平垂直居中方法

(1)    未知块级元素的宽高:给父级元素设置display:flex;align-items:center(垂直居中);justify-content:center(水平居中);

(2)    已知块级元素的宽高:给父元素设置position:relative;子元素设置position:absolute;top:50%;left:50%;margin-top:-hight/2;margin-left:-width/2;

(3)    已知块级元素的宽高:给子元素设置position:absolute;top:0;right:0;bottom:0;left:0;margin:0 auto;

如果只需要水平居中,还可以给元素本身设置margin:0 auto;

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!