CSS几个竖直与水平居中盒子模型
###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)