一、大小不固定，多行文字的垂直居中

① 单行文字

② 多行文字

上面所展示的就是多行文字垂直居中的效果！

HTML结构如下：

复制代码代码如下:
<div class="zxx_align_box_2"><span class="zxx_align_word">这里显示多行文字。</span></div>

css代码如下：

复制代码代码如下:
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}

实现的原理：

有几点简要说明：1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；2.外部div不能使用浮动；3.外部div高度和文字大小比例1.14为宜；4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；5.系统原因，我没能够在IE8下测试。

二、大小不固定，图片的垂直居中

① 透明gif图片+背景定位

HTML部分（仅示例一张图片，其他重复，故略）：

复制代码代码如下:
<ul class="zxx_align_box_3 fix">
<li>
<img src="/UploadFiles/2021-03-30/pixel.gif"> </li>
</ul>

css部分：

复制代码代码如下:
.zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;}
.zxx_align_box_3 li img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}

② display:table-cell和文字大小控制居中

HTML部分（仅示例一张图片，其他重复，故略）：

复制代码代码如下:
<ul class="zxx_align_box_4 fix">
<li>
<div><img src="/UploadFiles/2021-03-30/mm1.jpg"> </li>
</ul>

css部分：

复制代码代码如下:
.zxx_align_box_4 li{float:left; margin-right:13px;}
.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}
.zxx_align_box_4 li div img{vertical-align:middle;}

需要说明的：

2.这个通过文字大小控制IE下图片垂直居中是个很不错的方法，要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于：不支持img外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！

4.这个方法巧妙的应用了IE默认文字空间的概念，然而这个默认文字空间是看不见，摸不着的，较抽象，不好理解，使用者多记住用法，深层次原因不太理解，不易上手。但是，这里我要转折一下，我想到了一种方法，将抽象默认文字空间的概念具体出来，实现了更加容易理解，更加方便使用，更加利于维护的新方法，这就是最后一种方法。

③ display:inline-block和文字大小控制居中

HTML部分（仅示例两张图片，其他重复，故略）：

复制代码代码如下:
<div class="zxx_align_box_5 fix">
<a href="#zhangxinxu">
<img src="/UploadFiles/2021-03-30/mm1.jpg"> </a>
<a href="#zhangxinxu">
<img src="/UploadFiles/2021-03-30/mm2.jpg"> </a>
</div>

css部分：

复制代码代码如下:
.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}
.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}

需要说明的：

2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了。

④ 使用空白图片实现垂直对齐

HTML部分（仅示例一张图片，其他重复，故略）：

复制代码代码如下:
<ul class="zxx_align_box_6 fix">
<li>
<img class="show_img" src="/UploadFiles/2021-03-30/mm1.jpg"> <img class="alpha_img" src="../image/pixel.gif"> </li>
</ul>

css部分：

复制代码代码如下:
.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}
.zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}
.zxx_align_box_6 li .show_img{vertical-align:middle;}

原理简述：

其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其性质类似于空格，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实例成一张透明的gif图片，高度可以轻松设置为外部标签的高度，然后通过vertical-align:middle对齐，就实现效果了，在各个浏览器下都是一样的表现，不需要担心什么兼容性的问题。而且代码很简单，很易懂，想出错都难！