margin: 0 auto;可以使盒子水平居中，那为什么margin: auto 0;不可以使盒子垂直居中呢？

margin: 0 auto;可以使盒子水平居中，那为什么margin: auto 0;不可以使盒子垂直居中呢？

刘宇阳 2020-12-16

源自：浮动与定位 4-9 小慕医生项目开发（6）

18

收起

2回答

好帮手慕星星 2020-12-16 12:11:25

同学你好，在正常文档流中，margin:0 auto;能实现水平居中，而margin:auto 0 ;不能实现垂直居中可以理解为是规定的效果。元素在垂直方向上不能实现自动扩充以及分配内容，所以不能实现垂直居中。

但是margin:auto 0;可以配合定位实现垂直居中，例如：

祝学习愉快！

提问者刘宇阳 #1

为什么定位要写top0跟bottom0啊？

2020-12-16 12:16:41
好帮手慕星星回复提问者刘宇阳 #2

你好，可以理解为拔河效应，定位的时候既设置在顶部，也设置在底部，那么当设置垂直方向margin值为auto的时候，会居中显示。知道这种效果并且会使用就好。

2020-12-16 15:00:35

刘宇阳提问者 2020-12-16 03:26:09

margin: 0 auto;水平居中

margin: auto 0;垂直居中为什么不起作用？？？

原理不是应该一样的吗？

相似问题

margin:0 auto;这样设置是指div水平垂直都居中吗

4-7 编程练习，为什么“.big{margin:0 auto;}”不能实现整体居中？

盒子水平居中问题

为什么middle没有设置定位，就能够直接使用margin：0 auto？

为什么我的margin 0 auto没有用

登录后可查看更多问答，登录/注册

前端工程师2020

参与学习人
提交作业 7872 份
解答问题 15282 个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

本课精华内容

问答作业

老师，我在xhr.send()出错了

92 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载