为什么当高度为固定大小值时,marign:auto 0很难垂直居中元素?

标题中我用了一个词:"很难"。是因为块级元素在垂直方向上不具备和水平方向同样的特性。但这并不等于说我们就没有办法使用margin:auto 0让它垂直居中。看我来我分析一下不能垂直居中的本质原因。

一、理解有关CSS中包含块的特性

首先大家要对包含块在CSS中地位要特别清楚。

第一点,子元素position(static/relative),设置元素尺寸属性时,其包含块是父元素的content-box。

第二点,父元素非static定位,设置子元素绝对定位时的位置属性。其包含块是父元素的padding-box。

这两点应该没问题,大家都应该知道吧。

二、居中原理分析

1、使用margin:0 auto水平居中本质原因

水平居中原理上一篇写的很详细,需要多读几遍,总结一下就是:元素定位是static/relative时,块级元素表现具有满屏特性,满屏表现出水平方向上占满整个父容器的宽度,而满屏的本质是子元素的margin-box大小等于其包含块的content-box的大小。所以,当水平方向上padding、border,width都是定值时,margin设置auto,默认就会左右平分剩余空间。从而达到水平居中效果。

2、使用margin:auto 0难垂直居中原因

相对较于水平方向上,当元素定位是static/relative时,在垂直方向上元素的margin-box并不具有满屏特性,也就是说元素的margin-box尺寸大小并不等于包含块的content-box大小,margin在垂直方向的值默认都是0,哪怕设置成auto。所以也就失去了垂直居中空间条件。表现出来就是尺寸属性设置多大就占用多大空间。

三、哪种情形可以使用margin:auto 0垂直居中元素

尽然知道了不能垂直居中的原因是元素定位是static/relative时表现出来的,那绝对定位元素呢?是否可以使用margin: auto 0。来垂直居中元素呢? 答案是可以的。

理论分析是可以的:首先绝对定位元素的包含块是padding-box。也就是说有如下公式是成立的:

子元素的ourHeight(margin-box)= 包含块的Height(暂认为就是padding-box) - 子元素的top - 子元素的bottom

只要包含块Height和绝对定位子元素的top和bottom值确定,子元素的使用垂直方向上的margin为auto。就会在剩余空间上下平分空间。

看一个演示:

注意绝对定位元素当top=0,bottom默认大小就是包含块padding-box大小减去子元素margin-box。

最后总结一下:

为什么当高度为固定大小值时,marign:auto 0很难垂直居中元素?这里给出了原因,也同时分析了绝对定位元素能使用margin:auto 0来垂直居中的情况,为什么这种垂直居中方式在绝对元素中不太被使用呢?那是因为当元素是绝对定位时,垂直居中的方法有很多,往往想到的不是这种方式。大家可以对比看,可能这种方式更简单,有意思。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180812A0AC0900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券