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的值均为高和宽值的一半。大家可以去尝试下看看效果。
立即学习“前端免费学习笔记（深入）”；
2、margin:auto法
这个也可以是定位法。用这个方法要求子级div必须设置宽的值，不然没有效果哦~margin:auto是水平垂直都居中，如果仅仅设置水平居中，可设置为margin:auto 0;同理，如果仅仅设置垂直居中，可设置为margin:0 auto.
3、display:table-cell法
这个方法主要针对多行文字内容的垂直居中对齐。注意：text-align:center设置了文字的水平居中对齐，vertical-align:middle设置的是垂直居中对齐。
4、transform:translate(x,y)法
这个是css3中的新属性，如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。
5、before，after伪元素法
这个也是让子级元素垂直居中了。如果还想要水平居中的话可以配合其他几种方法配合使用来实现，比如给子级元素设置：margin:0 auto;这样就水平和垂直都居中了。
6、Flex布局法
这个方法要充分考虑浏览器的兼容性。要垂直居中的元素也是无需设置宽和高的值，可以用在自适应页面中来实现水平垂直居中。
相关教程推荐：CSS视频教程
以上就是css代码如何居中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1618435.html
微信扫一扫 
支付宝扫一扫 
