CodeSky 代码之空

###1、利用绝对定位，一个居中的模型 演示

1#login {                  	/* 定义一个ID选择器 */
2	width:300px;          	/* 定义盒子宽度为300px */
3	height:200px;        	/* 定义盒子高度为200px	*/
4	position:absolute;    	/* 使用绝对位置进行定位	*/
5	left:50%;             	/* 左部盒子开始位置是页面宽度的50%  */
6	top:50%;              	/* 顶部盒子开始位置是页面高度的50%  */
7	margin-left:-150px;   	/* 左部开始位置再退回盒子宽度的一半 */
8	margin-top:-100px;    	/* 顶部开始位置再退回盒子高度的一半 */
9	background:#BABABA;   	/* 定义盒子的背景颜色为灰色         */
10}
11

###2、盒子水平居中设计2 演示

1body {                            /* 为网页主体内容区域设置样式               */
2	margin:0;					  /* 设定网页外部边距值为0，消除body默认值    */
3	padding:0;					  /* 设定网页内部边距值为0，消除body默认值    */
4	text-align:center;			  /* 为了在IE中设置主体容器盒子居中            */
5}
6#container {					  /* 为布局的最外层容器使用ID选择器设置样式    */
7	width:966px;				  /* 设置最外层容器宽度为966px                  */
8	margin:0 auto;				  /* 设置外边距上下为0，左右自动，则在FF中居中 */
9	text-align:left;			  /* 再将主容器中的文本内容调回为居左显示      */
10	background:#888;			  /* 临时设置一下背景颜色显示主容器布局效果    */
11	height:800px;				  /* 也是临时设置一下高度显示主容器的布局效果  */
12}
13

###3、竖直居中： ####文字水平，竖直居中： 水平居中：text-align: center; 竖直居中：line-height: 30px（30为层高）

应用这一点的演示见CSS导航栏（仿W3School） ####div层竖直居中：

1	position: relative;
2	top:50%;
3	margin-top: -150px; 	/* 为 1/2的height */
4