css如何实现居中?

css如何实现居中?下面本篇文章给大家介绍一下使用css实现水平、垂直居中的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

水平居中

方法①:(父元素)text-align,(子元素)inline-block

这个是比较传统的做法,而且代码量也相对比较少,它的特点是可以很好地兼容IE6等低版本浏览器。至于缺点也比较明显,是需要把父元素和子元素都做成一个整体,并且上同时设置CSS

总结:

优点:兼容性好,支持低版本浏览器

缺点:需要同时在父元素和子元素上设置

适用场景:子元素数量少(或只有一个),并且需要兼容低版本浏览器时使用

方法②:(子元素)display:table;margin:auto;(左右auto即可)

例:display:table; margin: 0 auto

这个方法利用display:table这个样式把子元素转化成类表格元素,从而可以用margin:auto来自动居中。方案的优点是只需要在子元素上加CSS,但display:table在IE8以上浏览器才有效果,所以本方法只适合用在较高版本浏览器中。

总结:

优点:只需要在子元素设置。

缺点:不兼容IE6和IE7

适用场景:子元素数量多,不方便修改父元素的属性,对浏览器版本要求相对较低时使用

方法③:(父元素)position:relative,(子元素)absolute+left+transform(translateX(-50%))

这个的方法看起来就比较现代化了。没错,它的核心是利用了CSS3里的水平偏移,由于设置了absolute,所以对其他元素基本不会造成影响

优点:不影响其他元素

缺点:transform兼容性

1.png

方法④:flex+justify-content/margin

这个方法利用了display:flex对Grid操作的强大,分别有两种设置方法。

  • 一种是(父元素)display:flex;justify-content:center;

优点:只设parent

缺点:flex兼容性差,而且比较耗资源

2.png

  • 另一种是(父元素)display:flex;(子元素)margin:0 auto;

优点:代码简单

缺点,污染父元素,flex兼容性问题

3.png

水平居中这里的4种方法应该可以帮大家对应掉工作中绝大多数情况。下面我们来说说垂直居中

垂直居中

①(父)table-cell + vertical-align

优点:兼容性比较好,换成table可以兼容IE6,7

缺点:table-cel会不能和float、position:absolute同时设置。(只能在外parent外套一层div.wrap才能设置float)

4.png

②(父)position:relative;(子)absolute +top+ transform

这个方法和水平居中的left+transform类似,这里就不再赘述了

优点:基本只设置子元素,不影响其他元素

缺点:transform兼容性问题

5.png

③(父)flex + align-items

方法和水平居中的flex很类似吧

优点:只要设置parent

缺点:flex和align-items的兼容性

6.png

水平垂直同时居中

我们对水平居中和垂直居中的情况思考一下就会知道,要想达到水平垂直都居中,子元素必须是独立的,而父元素的垂直和水平样式互不影响。

方法①:(父)text-align + table-cell + vertical-align,(子)inline-block(兼容性方案)

7.png

方法②:(子)absolute + transform(不影响父元素方案,不兼容)

8.png

方法③:(父)flex + justify - content + align - items(不影响子元素方案,不兼容)

9.png

更多web前端知识,请查阅 HTML中文网 !!

以上就是css如何实现居中?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏