css浏览器兼容问题 css设置居中的方案总结

回想一下，自己平时项目里遇到的比较多的就是css如何让元素居中显示，其实差不多每种情况都遇到过，所采用的方法也都各有利弊，下面对这些方法来做个概括，对其中的坑点，也会一一指出来，希望能给遇到问题的同学一些参考：

一、水平居中

注意：低版本的浏览器还需要设置text-align:center;

二、垂直居中

优点：兼容性不错

缺点：需要提前知道尺寸，可拓展性和自适应性不好

优点：不需要提前知道尺寸

缺点：兼容性不好，只支持ie9+浏览器，而且还会引发一些其他的奇怪的兼容问题

优点：不需要提前知道尺寸，兼容性好

缺点：我目前还没有遇到。css浏览器兼容问题

此方法出自张鑫旭老师的博客，我也是了解了之后，才运用到实际开发中的

缺点：如果高度固定，需要提前计算尺寸（只在某些特定情况适用）。

父元素一定要设置display:table，这样子元素的table-cell才能生效

缺点：兼容性不好

这个方案是从张鑫旭大神的新书：《css世界》里读到的

vertical-align这个属性需要与同元素内的行内元素的基线为参考，高度100%自然就以高度50%处即平常所说的中线为基线，middle默认对齐其基线，自然也就垂直居中对齐了

HTML代码：

CSS代码：

table布局是十年前前端最常用的布局方式，最省心但是冗余也很多，结构嵌套也比较深。现在前端变化日新月异，不推荐使用

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-70414-1.html