CSS：BFC，块级元素居中

标签：宽高   pos   form   font   apt   osi   line   ott   ems   

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;

CSS：BFC，块级元素居中

标签：宽高   pos   form   font   apt   osi   line   ott   ems   

原文地址：https://www.cnblogs.com/xxqd/p/12198296.html