css如何设置居中

这篇文章主要介绍了css如何设置居中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

css设置居中的方法:1,通过【保证金:0汽车;text-align:中心】实现CSS水平居中;2,通过【显示:flex】实现CSS水平居中;3,通过【显示:单元格】实现居中。

本教程操作环境:windows7多系统,css3版,戴尔G3电脑。

<强> CSS设置居中的方法:

1,通过保证金:0汽车;text-align:中心实现CSS水平居中。

这种方法是实现CSS水平居中最最常用的,我在前端开发中大概有60%的CSS水平居中就是通过“保证金:0汽车;text-align:中心”实现的。

2,通过显示:flex实现css水平居中。

随着越来越多兼容flexbox,所以通过”显示:flex“实现css水平居中的方案也越来越受青睐。

通过显示:flex实现css水平居中的原理是父元素显示:flex; flex-direction:列;而子元素align-self:中心;

这个跟css垂直居中的原理是一样的,只是在flex-direction上有所差别,一个是行(默认值),另外一个是列。

3,通过显示:表格单元和margin-left实现css水平居中。

对于父元素和子元素的宽度都确定的情况,适合通过显示:表格单元和margin-left实现css水平居中。

使用时,父元素显示:表格单元、子元素给剩余宽度一半的margin-left。

感谢你能够认真阅读完这篇文章,希望小编分享的“css如何设置居中”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

css如何设置居中