应用Css实现水平垂直居中-HTML教程-爱易网页

应用Css实现水平垂直居中

日期：2014-05-17　浏览次数：20694 次

使用Css实现水平垂直居中

问题：假设有一个div，高宽都为200px，如何使得div内的内容水平居中？
很简单，设置该div的style.textAlign为center。
```
<div style="text-align:center;width:200px;height:200px;border:1px solid black;">
 水平居中示例。
</div>
```
水平居中示例。
问题：假设有一个div，高宽都为200px，如何使得div内的内容垂直居中？

使用table的话，解决这个问题相当简单。
```
<table width="200" height="200" style="border:1px solid black;">
 <tr>
  <td valign="middle">哈哈哈</td>
 </tr>
</table>
```
使用Table垂直居中
```
<table width="200" height="200" style="border:1px solid black;">
 <tr>
  <td valign="middle"><img src="/img/2012/09/27/1722188451.png"/></td>
 </tr>
</table>
```
```
<table width="200" height="200" style="border:1px solid black;">
 <tr>
  <td valign="middle">
   <div>
   使用Table垂直居中<br />
   使用Table垂直居中<br />
   使用Table垂直居中<br />
   </div>
  </td>
 </tr>
</table>
```
使用Table垂直居中
使用Table垂直居中
使用Table垂直居中

若不使用table，这个问题则有些复杂。
如果只考虑某一个浏览器，也不会复杂到哪里去，但若考虑兼容所有浏览器，需要下一定的功夫。
由于Html元素我们可以分为三种：非可替换元素(如span、label等)、可替换元素(img)、块元素(div)。
我们可以把这个问题分成简单的三个问题。
1. div中只有文字，高度宽度未知。
2. div中只有图片，高度宽度未知。(但图片大小小于div。)
3. div中还有一个div，高度宽度已知。
第一个问题，可以使用line-height等于该div的高度来解决，这样会限制该div内只能有一行文字。
```
<div style="width:200px;height:200px;border:1px solid black;line-height:200px;">
 文字的垂直居中。
</div>
```
文字的垂直居中。
对于多行文字的div，纯css实现目前比较无奈，IE应该是没有办法做到。
不过IE提供了expression，可以在这里面写一些js脚本，再加上position的relative和absolute，可以搞定多行文字的垂直居中。
display的table和table-cell，FF是支持的。可以实现多行文字的垂直居中。
下面代码中的_position、_left、_top的写法是专门针对IE的。
```
<div style="width: 300; height: 200;border:1px solid #C0C0C0;_position:relative;display:table;">
	<div style="text-align:center;display:table-cell;_position: absolute;_top:expression((this.parentNode.offsetHeight-this.offsetHeight)/2);_left:expression((this.parentNode.offsetWidth-this.offsetWidth)/2);vertical-align:middle;">
		多行文字
		<br />
		垂直居中
	</div>
</div>
```
多行文字
垂直居中

第二个问题，针对非IE浏览器，我们可以使用WEB标准里面的display:table-cell;vertical-align;middle;来解决。
针对IE浏览器，则可以使用font-size的hack来解决。
```
<div style="width:200px;height:200px;border:1px solid black;line-height:200px;display: table-cell;vertical-align:middle;*display: block;*font-size:175px;*font-family:Arial;">
 <img src="/img/2012/09/27/1722188451.png" style="vertical-align:middle;"/>
</div>
```
注意这里font-size的大小不是200px，这是因为IE对字体大小的算法与html元素的算法不同。
一般情况下，这个font-size约为高度的0.873，本例为200*0.873 约为175。
*font-family:Arial;是防止非utf-8引起的hack失效问题，如gbk编码。

第三个问题，若html文件添加了doctype，则可以使用margin:auto;来解决。
但是我们考虑的是一般情况下，这个问题该如何解决。则此方案被否决。
若是该div的宽度和高度都是未知的，我目前也想纯CSS的方法来解决这个问题，而且这种场景，个人认为相对较少。
这种情况下，我们可以使用negative margin来解决这个问题，也就是说使用负值的Margin来解决这个问题。

negative margin的概念一开始比较难理解。
可以这么考虑一下，margin-top:20px;使得div的显示往下移动20px的距

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

应用Css实现水平垂直居中

相关资料更多>

推荐阅读更多>