Skip to content
水平垂直居中,这是一道面试必考题,^_^
HTML CSS
Branch: gh-pages
Clone or download
Latest commit 9480bb1 Sep 13, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md blog: update Sep 13, 2018
absolute1.html feat: 增加适用类别 Mar 13, 2018
absolute2.html
absolute3.html feat: 增加适用类别 Mar 13, 2018
absolute4.html fix: 修复css语法错误 Sep 12, 2018
common.css feat: 增加适用类别 Mar 13, 2018
css-table.html
flex.html feat: 添加百度统计 Jan 24, 2018
grid.html feat: 添加百度统计 Jan 24, 2018
lineheight.html fix: 修复lineheight示例未完全垂直居中 Mar 13, 2018
table.html feat: 添加百度统计 Jan 24, 2018
writing-mode.html feat: 增加适用类别 Mar 13, 2018

README.md

水平垂直居中

仅居中元素定宽高适用:

居中元素不定宽高适用:

总结

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

  • 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/

You can’t perform that action at this time.