分类： 系统运维
2010-04-22 14:00:54
CSS实现高度不定的元素内部垂直局中
相信写过一段时间CSS的朋友都碰到过这个问题.本文来说说如何解决
问题的定义：
1、 一个在页面中已知高的区域（如DIV）。
2、 一个内部元素（代表在DIV中的一段长文本）在一个未知高的区域内部（如：它们内容的数据是动态变化的）。
3、 要求它垂直居中在区域中。
4、 不用Table表格。
构想
IE中的主要解决方案：内部的区域元素绝对定位于外部区域元素高的一半。然后它到移到它高的一半位置。在IE中高属性的错误解析需要用一个额外的嵌套DIV属性来解决。
解决像browsers like Mozilla, Opera, Safari等一些标准的浏览器垂直居中的方法又完全不同。将整个顶部的DIV区域的显示模式设为表格 (display:table)，内部的对象视为表格单元格（display:table-cell），而且这里有个小技巧：需要为这个显示元素设置垂直居中属性。
将这再种语法合并，我没有用下划线hack，而是用了#标记，用下划线写的CSS属性能被除开IE7外的所有之前的版本所识别，用#写的CSS属性能被所有IE浏览器识别(包括IE7)，这两种写法都不其它标准浏览器所识别。而下划线hack对本实例实现浏览器兼容似乎也行不能。如果你不想用#标记的方法（建议在CSS中最好不用CSS hack），你可以用下面介绍的方法：
代码
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2
3 <html>
4 <head>
5 <title>Vertical centering in valid CSStitle>
6
13 <style type="text/css">
14 .greenBorder {border: 1px solid green;}
15 #outer{width:100%;height: 400px; display:table;position: static;}
16 #middle{display:table-cell;vertical-align: middle;}
17 style>
18 head>
19
20 <body>
21 <h1>Vertical Centering in valid CSS - Exampleh1>
22 <div id="outer" class="greenBorder">
23 <div id="middle">
24 <div id="inner" class="greenBorder">
25 any text<br>
26 <b>any heightb><br>
27 any content, for example generated from DB<br>
28 everything is vertically centered<br>
29 div>
30 div>
31 div>
32 body>
33
实现垂直和水平居中
核心代码基本是相同的，只需要加几条CSS即可。即标准页面代码为：
<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
style>
你可能看到，使用了布局中用得最多的元素水平居中的方法margin-left: auto; margin-right: auto;因为margin在Firefox and Opera中需要空间。因此你需要为# outer DIV高宽，如果你觉得100%不合适你也可以根据自己的需要设定宽度。
如果你使用怪异模式（或兼容模式 见注1）来表现页面（我们都知道页面依赖于文档类型），你需要多加一点点代码，因为怪异模式的IE不支持margin auto,但是有一个好的bug 能替代它：text-align:center,下面这段代码在怪异模式和标准模式下都能有效：
<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;}
style>
