margin: auto 和 margin: 0 auto 的区别

margin: auto 和 margin: 0 auto 的区别

如题,margin: auto 和 margin: 0 auto 的区别是什么呢

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕言 2019-07-20 19:09:08

同学你好,定位之后,不加偏移值的情况下,margin:0 auto;是不生效的,

如果left值和right值都设置为0;元素就会居中了。

如果帮助到了你,欢迎采纳~祝学习愉快~

好帮手慕言 2019-07-20 11:51:18

同学你好,

1、margin:0 auto;这个是水平居中(上下的margin值为0),大部分都是可以使用的,但是有使用设置浮动或者定位(脱离文档流)的时候,会导致无法使用。

例:

http://img1.sycdn.imooc.com//climg/5d328f050001498205720696.jpg

页面效果:

http://img1.sycdn.imooc.com//climg/5d328f1f00013b4d05610529.jpg

2、margin:auto;可以实现垂直水平都居中,需要结合定位来实现。

例:

http://img1.sycdn.imooc.com//climg/5d328f740001ec6406180851.jpg

页面效果:

http://img1.sycdn.imooc.com//climg/5d328f8500010bd905380517.jpg

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 慕工程8451887 #1
    谢谢,还有一个关于position的问题,在第一种情况下,在parent中加入position: relative; 在child中加入 position: absolute中,元素就不能居中了。 我明白如果在child 中加入 left: 0; 和 right: 0; 就会居中,但不明白为什么不加不能居中,child不是应该相对于parent的位置是水平居中吗?望解答,谢谢
    2019-07-20 13:28:55
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师