V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mangojiji
V2EX  ›  前端开发

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

  •  
  •   mangojiji · 246 天前 via Android · 1007 次点击
    这是一个创建于 246 天前的主题,其中的信息可能已经有所发展或是发生改变。
    margin:auto 默认能够水平居中,而垂直方向不会,是这样吗,为什么,什么原理。
    7 条回复    2024-03-14 09:30:13 +08:00
    samuelclassic
        1
    samuelclassic  
       246 天前 via iPhone
    因为水平是定宽,左右等间距就居中了。但是垂直可以一直堆叠,没有确定高度。不知道是不是这样。
    learnshare
        2
    learnshare  
       246 天前
    有些东西很难说原理,长期发展,各种因素综合的结果
    ZE3kr
        3
    ZE3kr  
       246 天前 via iPhone
    因为 block 高度通常默认不是 100vh ,但宽度通常是占满的吧
    vituralfuture
        4
    vituralfuture  
       246 天前 via Android
    曾经看过一点 CSS 权威指南第五版,里面应该有这个问题的答案,推荐 op 看看

    我只看了几小时,所以也只是似懂非懂。我认为是,HTML 布局本质上还是像文档一样,文字从左到右书写,如果超过了就换行。所以如果想要垂直居中,指定行高是比较符合直觉的
    DOLLOR
        5
    DOLLOR  
       246 天前
    垂直居中的前提是要知道容器的高度。
    HTML 刚发明的时候,是把网页视为一个可以无限向下渲染的文档。
    这个文档并没有一个“初始高度”的概念,所以当时就没考虑垂直居中的需求。
    old9
        6
    old9  
       246 天前 via Android
    看下 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
        7
    paopjian  
       246 天前
    你是内部内容设置 margin 吗? 父元素有设置 border 和高度吗, 没有设置的话内外 margin 合并了
    https://www.bilibili.com/video/BV12N4y1U7jq
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2804 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 12:49 · PVG 20:49 · LAX 04:49 · JFK 07:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.