css代码如何居中


本文摘自PHP中文网,作者coldplay.xixi,侵删。

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设置的是垂直居中对齐。

阅读剩余部分

相关阅读 >>

css的三种样式形式?

利用css绘制三角形的6种技巧(分享)

css perspective属性怎么用

css中float属性的属性值有哪些

css怎么显示svg图片

css定位图片位置不变的实现方法

css样式表常驻留在文档的什么区域中

css注释的两种写法是什么

css3和css的区别是什么

css实现加号一个的效果(代码示例)

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...