为什么 margin: auto 在默认不会垂直居中,背后是什么原因?

345 天前
mangojiji  mangojiji
margin:auto 默认能够水平居中,而垂直方向不会,是这样吗,为什么,什么原理。
1093 次点击
所在节点   前端开发  前端开发
7 条回复
samuelclassic
samuelclassic
345 天前
因为水平是定宽,左右等间距就居中了。但是垂直可以一直堆叠,没有确定高度。不知道是不是这样。
learnshare
learnshare
345 天前
有些东西很难说原理,长期发展,各种因素综合的结果
ZE3kr
ZE3kr
345 天前
因为 block 高度通常默认不是 100vh ,但宽度通常是占满的吧
vituralfuture
vituralfuture
345 天前
曾经看过一点 CSS 权威指南第五版,里面应该有这个问题的答案,推荐 op 看看

我只看了几小时,所以也只是似懂非懂。我认为是,HTML 布局本质上还是像文档一样,文字从左到右书写,如果超过了就换行。所以如果想要垂直居中,指定行高是比较符合直觉的
DOLLOR
DOLLOR
345 天前
垂直居中的前提是要知道容器的高度。
HTML 刚发明的时候,是把网页视为一个可以无限向下渲染的文档。
这个文档并没有一个“初始高度”的概念,所以当时就没考虑垂直居中的需求。
old9
old9
344 天前
看下 css 2.1 规范 10.3.3 节,可以了解为什么左右 margin 可以有居中效果
https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#blockwidth

以及规范 10.6.3 节,了解为什么上下 margin 不行
https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#normal-block
paopjian
paopjian
344 天前
你是内部内容设置 margin 吗? 父元素有设置 border 和高度吗, 没有设置的话内外 margin 合并了
https://www.bilibili.com/video/BV12N4y1U7jq

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1023418

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX