有关 HTML 水平垂直居中有关问题的讨论
日期：2014-05-17 浏览次数：20651 次
有关 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> 元素。
这个方法应该是很理想了，但是不幸的是，只有标准浏览器中(FF，Opera, Safari，IE8 等)才能正确地理解 display:table 和 display:table-cell，因此这种方法在不支持 W3C 标准的浏览器(IE6 和 IE7)下是无效的。嗯，这让人很郁闷！不过我们还其它的办法。
在不支持 W3C 标准的 IE 浏览器中，在高度的计算上存在着缺陷的。对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎
关于 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 即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
div {
/* 为了看清 div 的轮廓，我给 div 加上边框 */
border: 1px solid black;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 12px;
}
</style>
<div>我确保这段文字就只有一行。</div>
2. 多行文字(div 的高度未知)
这种情况，div 的高度是随文字的多少而变化的。只需设置 padding 值即可，看你需要 padding 多少了，比较随意。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
div {
/* 为了看清 div 的轮廓，我给 div 加上边框 */
border: 1px solid black;
width: 400px;
font-size: 12px;
padding: 20px;
}
</style>
<div> 如果一段内容，它的高度是可变的那么我们就可以使用使得上下的 padding 值相同的方法即可。同样的，这也是一种 "看起来" 的垂直居中方式，它只不过是使文字把 div 完全填充的一种访求而已。</div>
3. 多行文字(div 的高度指定，即固定高度的 div)
CSS 中的 vertical-align 属性只会对拥有 valign 特性的 (X)HTML 标签起作用，但是在 CSS 中还有一个 display 属性能够模拟 <table>，所以我们可以使用这个属性来让 <div> 模拟 <table> 就可以使用 vertical-align了。注意，display:table 和 display:table-cell 的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个 <div> 元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
div.outer {
/* 为了看清 div 的轮廓，我给 div 加上边框 */
border: 1px solid black;
width: 400px;
height: 300px;
overflow: auto;
font-size: 12px;
display: table;
}
div.inner {
display: table-cell;
vertical-align: middle;
padding: 20px;
}
</style>
<div class="outer">
<div class="inner">
CSS 中的 vertical-align 属性只会对拥有 valign 特性的 (X)HTML 标签起作用，但是在 CSS 中还有一个 display 属性能够模拟 table，所以我们可以使用这个属性来让 div 模拟 table 就可以使用 vertical-align了。注意，display:table 和 display:table-cell 的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个 div 元素。
</div>
</div>
这个方法应该是很理想了，但是不幸的是，只有标准浏览器中(FF，Opera, Safari，IE8 等)才能正确地理解 display:table 和 display:table-cell，因此这种方法在不支持 W3C 标准的浏览器(IE6 和 IE7)下是无效的。嗯，这让人很郁闷！不过我们还其它的办法。
在不支持 W3C 标准的 IE 浏览器中，在高度的计算上存在着缺陷的。对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
