yanhaijing / vertical-center

水平垂直居中,这是一道面试必考题,^_^

Home Page:http://yanhaijing.com/vertical-center/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

水平垂直居中

仅居中元素定宽高适用:

居中元素不定宽高适用:

总结

下面对比下各个方式的优缺点,肯定又双叒叕该有同学说回字的写法了,简单总结下

  • PC端有兼容性要求,宽高固定,推荐absolute + 负margin
  • PC端有兼容要求,宽高不固定,推荐css-table
  • PC端无兼容性要求,推荐flex
  • 移动端推荐使用flex

**小贴士:**关于flex的兼容性决方案,请看这里《移动端flex布局实战

方法 居中元素定宽高固定 PC兼容性 移动端兼容性
absolute + 负margin ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
absolute + margin auto ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
absolute + calc ie9+, chrome19+, firefox4+ 安卓4.4+, iOS6+
absolute + transform ie9+, chrome4+, firefox3.5+ 安卓3+, iOS6+
writing-mode ie6+, chrome4+, firefox3.5+ 安卓2.3+, iOS5.1+
lineheight ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
table ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
css-table ie8+, chrome4+, firefox2+ 安卓2.3+, iOS6+
flex ie10+, chrome4+, firefox2+ 安卓2.3+, iOS6+
grid ie10+, chrome57+, firefox52+ 安卓6+, iOS10.3+

相关博文

http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/

About

水平垂直居中,这是一道面试必考题,^_^

http://yanhaijing.com/vertical-center/


Languages

Language:HTML 97.3%Language:CSS 2.7%