科技知识动态:css代码如何居中

导读跟大家讲解下有关css代码如何居中,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说css代码如何居中,小编也收集到了有关css

跟大家讲解下有关css代码如何居中,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说css代码如何居中,小编也收集到了有关css代码如何居中的相关资料,希望大家看到了会喜欢。

css代码居中的方法:1、定位法【position:absolute】;2、使用【margin:auto】法;3、使用【display:table-cell】法;4、使用【transform:translate(x,y)】法。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css代码居中的方法:

1、定位法:position:absolute

如果子级div有定义宽和高的话就可以用这个方法。注意:margin-top,和margin-left的值均为高和宽值的一半。大家可以去尝试下看看效果。

e6c368968fa6b51bd5fcc0fed33a43c.png

2、margin:auto法

这个也可以是定位法。用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto.

76807d751219842cf4af0f063575cdc.png

3、display:table-cell法

这个方法主要针对多行文字内容的垂直居中对齐。注意:text-align:center设置了文字的水平居中对齐,vertical-align:middle设置的是垂直居中对齐。

5ee4b85f71a169555615ed69f39939b.png

4、transform:translate(x,y)法

这个是css3中的新属性,如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。

d0142527e9932d280a55fd6c50d11d0.png

5、before,after伪元素法

这个也是让子级元素垂直居中了。如果还想要水平居中的话可以配合其他几种方法配合使用来实现,比如给子级元素设置:margin:0 auto;这样就水平和垂直都居中了。

75bbdc300bffff766c22e8f4af70faa.png

6、Flex布局法

这个方法要充分考虑浏览器的兼容性。要垂直居中的元素也是无需设置宽和高的值,可以用在自适应页面中来实现水平垂直居中。

815172f905057d010c8522fa26471e9.png

相关教程推荐:CSS视频教程

以上就是css代码如何居中的详细内容,更多请关注php中文网其它相关文章!

来源:php中文网

免责声明:本文由用户上传,如有侵权请联系删除!