CSS 如何实现居中? 下面本篇文章给大家介绍一下使用 CSS 实现水平, 垂直居中的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
水平居中
方法1:(父元素)text-align,(子元素)inline-block
这个是比较传统的做法, 而且代码量也相对比较少, 它的特点是可以很好地兼容 IE6 等低版本浏览器. 至于缺点也比较明显, 是需要把父元素和子元素都做成一个整体, 并且上同时设置 CSS
总结:
优点: 兼容性好, 支持低版本浏览器
缺点: 需要同时在父元素和子元素上设置
适用场景: 子元素数量少 (或只有一个), 并且需要兼容低版本浏览器时使用
方法2:(子元素)display:table;margin:auto;(左右 auto 即可)
例: display:table; margin: 0 auto
这个方法利用 display:table 这个样式把子元素转化成类表格元素, 从而可以用 margin:auto 来自动居中. 方案的优点是只需要在子元素上加 CSS, 但 display:table 在 IE8 以上浏览器才有效果, 所以本方法只适合用在较高版本浏览器中.
总结:
优点: 只需要在子元素设置.
缺点: 不兼容 IE6 和 IE7
适用场景: 子元素数量多, 不方便修改父元素的属性, 对浏览器版本要求相对较低时使用
方法3:(父元素)position:relative,(子元素)absolute+left+transform(translateX(-50%))
这个的方法看起来就比较现代化了. 没错, 它的核心是利用了 CSS3 里的水平偏移, 由于设置了 absolute, 所以对其他元素基本不会造成影响
优点: 不影响其他元素
缺点: transform 兼容性
方法4:flex+justify-content/margin
这个方法利用了 display:flex 对 Grid 操作的强大, 分别有两种设置方法.
一种是 (父元素)display:flex;justify-content:center;
优点: 只设 parent
缺点: flex 兼容性差, 而且比较耗资源
另一种是 (父元素)display:flex;(子元素)margin:0 auto;
优点: 代码简单
缺点, 污染父元素, flex 兼容性问题
水平居中这里的 4 种方法应该可以帮大家对应掉工作中绝大多数情况. 下面我们来说说垂直居中
垂直居中
1(父)table-cell + vertical-align
优点: 兼容性比较好, 换成 table 可以兼容 IE6,7
缺点: table-cel 会不能和 float,position:absolute 同时设置.(只能在外 parent 外套一层 div.wrap 才能设置 float)
2(父)position:relative;(子)absolute +top+ transform
这个方法和水平居中的 left+transform 类似, 这里就不再赘述了
优点: 基本只设置子元素, 不影响其他元素
缺点: transform 兼容性问题
3(父)flex + align-items
方法和水平居中的 flex 很类似吧
优点: 只要设置 parent
缺点: flex 和 align-items 的兼容性
水平垂直同时居中
我们对水平居中和垂直居中的情况思考一下就会知道, 要想达到水平垂直都居中, 子元素必须是独立的, 而父元素的垂直和水平样式互不影响.
方法1:(父)text-align + table-cell + vertical-align,(子)inline-block(兼容性方案)
方法2:(子)absolute + transform(不影响父元素方案, 不兼容)
方法3:(父)flex + justify - content + align - items(不影响子元素方案, 不兼容)
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17300.html