有关 HTML 水平垂直居中问题的讨论
关于 HTML 水平垂直居中问题，网上的讨论已经是相当地多了。这里，我把网上搜索的结果，并附加上解题思路，总结出来，希望对大家有所帮助。

首先，我们需要明确一个概念，到底是谁要相对于谁水平垂直居中，相应的样式应该写在谁的里面。这里，我们统称为：inner element 相对于 outer element 水平垂直居中。下面首先讲到的是文字在 div 中居中，这个不属于这个范畴。因为盛放文字的 div 若是置于其它的 div(outer div) 中，而且文字 div 要整体相对于这个层居中，这才是我们要讨论的话题。这个时候，盛放文字的层就是 inner element，它所相对于的那个层居中的元素就是 outer element。

我们首先先看看如何使得某段文字处于 div 水平和垂直方向的中间，下面分情况来讨论。

1. 单行文字
单行文字，有两种情况：① div 的高度显示指定；② div 的高度未指定。对于 ②，文字的字体大小就决定了 div 的高度，此种情况没有必要讨论。对于 ①，只需要将 line-height 的值设置的和 height 值一致即可。至于宽度，没指定，写多少字就多宽，指定了宽度，设置 text-align 为 center 即可。

        2. 多行文字(div 的高度未知)
        这种情况，div 的高度是随文字的多少而变化的。只需设置 padding 值即可，看你需要 padding 多少了，比较随意。


        3. 多行文字(div 的高度指定，即固定高度的 div)
        CSS 中的 vertical-align 属性只会对拥有 valign 特性的 (X)HTML 标签起作用，但是在 CSS 中还有一个 display 属性能够模拟 <table>，所以我们可以使用这个属性来让 <div> 模拟 <table> 就可以使用 vertical-align了。注意，display:table 和 display:table-cell 的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个 <div> 元素。

        事实上，上述计算 margin-left 和 margin-top 的方法并不准确。以 margin-left 为例子，准确的计算方法为：-(border-left + padding-left + width + padding-right + border-right)/2。实际操作时，几像素的差距可以忽略不计，视觉上觉得是居中的即可。若 padding 或 border 设置的值很大的话，就应该考虑精确算法了。