点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

标题中我用了一个词："很难"。是因为块级元素在垂直方向上不具备和水平方向同样的特性。但这并不等于说我们就没有办法使用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来垂直居中的情况，为什么这种垂直居中方式在绝对元素中不太被使用呢？那是因为当元素是绝对定位时，垂直居中的方法有很多，往往想到的不是这种方式。大家可以对比看，可能这种方式更简单，有意思。