CodeSky 代码之空

随手记录自己的学习过程

CSS几个竖直与水平居中盒子模型

2014-01-23 13:21分类: CSS评论: 0

###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

评论 (0)