css不继承父级_CSS 布局一览 —— 居中布局

本文代码从兼容性和耦合性考虑。注意，CSS 布局没有银弹！
建议使用 https:// caniuse.com/# home 查看 CSS 属性的兼容性

1. 居中布局

• 水平居中
• 垂直居中
• 水平垂直居中

1.1 水平居中

1.1.1 inline + text-align

<

• 优点
• 兼容性好 IE 6-9
• 缺点
• text-align 具有继承性
  • 解决办法： 1. 给子元素设置text-align:xxx; 以覆

1.1.2 table + margin

<

• 优点
• 只对子级元素设置margin，实现居中
• 缺点
• 如果子级元素child脱离文档流，margin会失效
  • float: left / right
  • position: absolute / fixed

1.1.3 absolute + transform

<

• 优点
• 无论父级元素是否脱离文档流，都不会影响子级元素
• 缺点
• transform 兼容性不好 IE 9+

1.2 垂直居中

1.2.1 table-cell + vertical-align

<

• 优点
• 兼容性好 IE 6-9
• 缺点
• vertical-align 有继承性，导致其他子级元素元素也有效果

1.2.2 absolute + transform

<

• 优点
• 无论父级元素是否脱离文档流，子级元素不会受影响
• 缺点
• transform 兼容性 IE 9+

1.3 水平居中布局

1.3.1 水平 block + margin，垂直 table-cell + vertical-align

<

• 优点
• 兼容性杠杠的
• 缺点
• 语义话不太好
• 父元素实现垂直居中，子元素实现水平居中

1.3.2 absolute + transform

<

• 优点
• 松耦合
• 缺点
• transform 兼容性不好 IE 9+
  解决办法：可以通过 left / top (父元素高度二分之一 - 子元素高度二分之一)解决
  ```html ```
  • 优点
  • 兼容性更好
  • 缺点
  • 与父元素宽高、自身宽高 极度耦合，出现bug不易定位