居中

水平居中

对于 行内元素: text-align: center;

对于确定宽度的块级元素：

1. width和margin实现。margin: 0 auto;
2. 绝对定位和margin-left: -width/2, 前提是父元素position: relative

对于宽度未知的块级元素

1. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto。
2. inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。 //
3. 绝对定位+transform，translateX可以移动本身元素宽度的50%。 //兼容性
4. flex布局使用justify-content:center

垂直居中：

行内元素：

1. 行内文字：line-height;
2. 通过设置父容器 相对定位，子级设置 绝对定位，标签通过margin实现自适应居中
3. 弹性布局 flex:父级设置display: flex; 子级设置margin为auto实现自适应居中
4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform实现
5. table布局，父级通过转换成表格形式，然后子级设置 vertical-align实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

BFC

块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

• 触发条件
  • 根元素
  • position:absolute/fixed
  • display：inline-block/table
  • float元素
  • overflow!==visible2
• 规则：
  • 属于同一个BFC的两个相邻box垂直排列
  • 属于同一个BFC的两个相邻box的margin会发生重叠
  • BFC中子元素的margin box左边，与包含块(BFC)border box的左边相接触(子元素absolute除外)
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算 （清除浮动高度塌陷）
• 应用
  • 阻止margin重叠
  • 可以包含浮动元素-清除内部浮动(清除浮动的原理是两个div都位于同一个BFC区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖