自适应布局+垂直居中

一、自适应布局

1、头尾固定高度中间高度自适应布局：

(1) 绝对定位：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>头尾固定高度中间高度自适应布局</title>
 6 <style>
 7 html,body{
 8     margin:0;padding:0;height:100%;
 9 }
10 .head{
11     width:100%;height:45px;line-height:45px;background:#ccc;position:absolute;top:0;z-index:5;text-align:center;
12 }
13 .box{
14     width:100%;background:orange;overflow:auto;position:absolute;top:45px;bottom:45px;
15 }
16 .foot{
17     width:100%;height:45px;line-height:45px;background:#ccc;position:absolute;z-index:5;bottom:0;text-align:center;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="head">头部</div>
23 <div class="box">
24   <div class="content">中间自适应部分<br>
25     <p>content1</p><p>content1</p><p>content1</p><p>content1</p><p>content1</p><p>content2</p><p>content2</p><p>content2</p><p>content2</p><p>content2</p><p>content3</p><p>content3</p><p>content3</p><p>content3</p><p>content3</p><p>content4</p><p>content4</p><p>content4</p><p>content4</p><p>content4</p><p>content5</p><p>content5</p><p>content5</p><p>content5</p><p>content5</p>
26   </div>
27 </div>
28 <div class="foot">尾部</div>
29 </body>
30 </html>
View Code

(2) 利用boxsizing改变盒子模型：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>头尾固定高度中间高度自适应布局</title>
 6 <style type="text/css">
 7 *{
 8     margin:0;padding:0;
 9 }
10 html{
11     -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:45px 0;overflow:hidden;
12 }
13 html,body{
14     height:100%;
15 }
16 .top{
17     height:45px;background:#ccc;text-align:center;position:relative;top:-45px;
18 }
19 .side{
20     width:200px;height:100%;background:#fc0;overflow:auto;float:left;top:-45px;position:relative;
21 }
22 .main{
23     height:100%;background:#f30;overflow:auto;top:-45px;position:relative;
24 }
25 .bottom{
26     height:45px;background:#ccc;text-align:center;clear:both;top:-45px;position:relative;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="top"> top </div>
32 <div class="side"> side <br />
33     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
34 </div>
35 <div class="main"> main <br />
36     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
37 </div>
38 <div class="bottom"> bottom </div>
39 </body>
40 </html>
View Code

(3) 设置主体部分的box-sizing：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>头尾固定高度中间高度自适应布局</title>
 6 <style>
 7 *{
 8     margin:0;padding:0;
 9 }
10 html, body{
11     height:100%;width:100%;overflow:hidden
12 }
13 .top{
14     height:45px;width:100%;background:#ccc;position:absolute;top:0;left:0;z-index:10;text-align:center;
15 }
16 .footer{
17     height:45px;width:100%;background:#ccc;position:absolute;bottom:0;left:0;z-index:10;text-align:center;
18 }
19 .main{
20     background:#f60;width:100%;height:100%;overflow:auto;position:absolute;top:0;z-index:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-top:45px solid #fff;border-bottom:45px solid #fff;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="top">头部</div>
26 <div class="main">
27     中间自适应部分<br>
28     <p>content1</p> <p>content1</p> <p>content1</p> <p>content1</p> <p>content1</p> <p>content1</p> 
29     <p>content2</p> <p>content2</p> <p>content2</p> <p>content2</p> <p>content2</p> <p>content2</p> 
30     <p>content3</p> <p>content3</p> <p>content3</p> <p>content3</p> <p>content3</p> <p>content3</p> 
31     <p>content4</p> <p>content4</p> <p>content4</p> <p>content4</p> <p>content4</p> <p>content4</p> 
32     <p>content5</p> <p>content5</p> <p>content5</p> <p>content5</p> <p>content5</p> <p>content5</p> 
33     <p>content6</p> <p>content6</p> <p>content6</p> <p>content6</p> <p>content6</p> <p>content6</p> 
34 </div>
35 <div class="footer">尾部</div>
36 </body>
37 </html>
View Code

 

2、左固定右自适应宽度：

方法1：右侧用margin-left，左侧float:left; 就可以实现：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>左侧固定宽度右侧自适应</title>
 6 <style>
 7 *{
 8     margin:0;padding:0;
 9 }
10 .left{
11     width:200px;height:300px;float:left;background:#ccc;
12 }
13 .right{
14     height:300px;margin-left:200px;background:orange;
15 }
16 </style>
17 </head>
18 <body>
19     <div class="left">left</div>
20     <div class="right">right</div>
21 </body>
22 </html>
View Code

方法2：右侧同样用margin-left，左侧采用绝对定位：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>左侧固定宽度右侧自适应</title>
 6 <style>
 7 *{
 8     margin:0;padding:0;
 9 }
10 .box{
11     position:relative;
12 }
13 .left{
14     width:200px;height:300px;background:#ccc;position:absolute;left:0;top:0;
15 }
16 .right{
17     height:300px;margin-left:200px;background:orange;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="box">
23     <div class="left">left</div>
24     <div class="right">right</div>
25 </div>
26 </body>
27 </html>
View Code

方法3：左侧浮动且用负margin值：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>左侧固定宽度右侧自适应</title>
 6 <style>
 7 *{
 8     margin:0;padding:0;
 9 }
10 .wrapL{
11     width:200px;background:#ccc;float:left;margin-right:-200px;
12 }
13 .wrapR{
14     width:100%;float:right;
15 }
16 .left{
17     height:300px;
18 }
19 .right{
20     height:300px;margin-left:200px;background:orange;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="box">
26     <div class="wrapL">
27         <div class="left">left</div>
28     </div>
29     <div class="wrapR">
30         <div class="right">right</div>
31     </div>
32 </div>
33 </body>
34 </html>
View Code

 

3、左固定右固定中间自适应宽度： 

方法1：左右侧采用浮动，中间采用margin-left 和 margin-right方法：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>左固定右固定中间自适应宽度</title>
 6 <style>
 7 *{
 8     margin:0;padding:0;
 9 }
10 .left{
11     width:200px;height:300px;float:left;background:#ccc;
12 }
13 .right{
14     width:200px;height:300px;float:right;background:orange;
15 }
16 .main{
17     height:300px;margin-left:200px;margin-right:200px;background:#ddd;
18 }
19 </style>
20 </head>
21 <body>
22     <div class="left">left</div>
23     <div class="right">right</div>
24     <div class="main">main</div>
25 </body>
26 </html>
View Code

方法2：左右两侧采用绝对定位，中间同样采用margin-left 和 margin-right方法：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>左固定右固定中间自适应宽度</title>
 6 <style>
 7 *{
 8     margin:0;padding:0;
 9 }
10 .left{
11     width:200px;height:300px;position:absolute;top:0;left:0;background:#ccc;
12 }
13 .right{
14     width:200px;height:300px;position:absolute;top:0;right:0;background:orange;
15 }
16 .main{
17     height:300px;margin-left:200px;margin-right:200px;background:#ddd;
18 }
19 </style>
20 </head>
21 <body>
22     <div class="left">left</div>
23     <div class="main">main</div>
24     <div class="right">right</div>
25 </body>
26 </html>
View Code

 

二、垂直居中

1、单行文字垂直居中

利用 line-height 即可轻松实现，如下示例：

1 height:45px;line-height:45px;

2、多行文本固定高度垂直居中1

利用 display:table-cell; vertical-align:middle; 即可实现，不过对IE7及IE7以下不兼容，如下示例：

1 <div style="height:350px;background:#ddd;display:table;">
2     <div style="display:table-cell;vertical-align:middle;">
3         豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
4     </div>
5 </div>
View Code

3、多行文本固定高度垂直居中2

利用绝对定位来实现，兼容ie7+，如下示例：

1 <div style="height:350px;background:#ddd;position:relative;">
2     <div style="height:80px;position:absolute;top:50%;margin-top:-40px;">
3         豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
4     </div>
5 </div>
View Code

4、多行文本未知高度垂直居中

利用绝对定位来实现和 display:table-cell; vertical-align:middle; 兼容ie低版本写法来实现：

 1 <style>
 2 html,body{height:100%;}
 3 #div1{height:100%;display:table;background:#ddd;*+position:relative;}
 4 #div1 #div2{display:table-cell;vertical-align:middle;padding:10px;*+position:absolute;*+top:50%;}
 5 #div1 #div2 #content{*+position:relative;*+top:-50%;}
 6 </style>
 7 
 8 <div id="div1">
 9     <div id="div2">
10         <div id="content">
11             披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。
12         </div>
13     </div>
14 </div>
View Code

5、内容块绝对居中(水平垂直居中)

方法1：利用绝对定位和 margin:auto; 来实现，兼容ie8+，如下示例：

 1 .box{
 2     width:100px;
 3     height:100px;
 4     background:#ddd;
 5     border-radius:5px;
 6     overflow:auto;
 7     position:absolute;
 8     top:0;left:0;right:0;bottom:0;
 9     margin:auto;
10 }
11 <div class="box">hello you!</div>
View Code

方法2：利用绝对定位和 负margin值 来实现，兼容ie7+，如下示例：

 1 .box{
 2     width:100px;
 3     height:100px;
 4     background:#ddd;
 5     border-radius:5px;
 6     position:absolute;
 7     top:50%;left:50%;
 8     margin-top:-50px;
 9     margin-left:-50px;
10 }
11 <div class="box">hello you!</div>
View Code

方法3：利用绝对定位和 css3的transform属性实现，兼容ie9+，如下示例：

 1 .box{
 2     padding:10px;
 3     background:#ddd;
 4     border-radius:5px;
 5     position:absolute;
 6     top:50%;left:50%;
 7     transform:translate(-50%,-50%);
 8 }
 9 <div class="box">
10     内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~
11 </div>
View Code

方法4：利用弹性盒子(justify-content:center;和align-items:center;)实现，只测试了Chrome，如下示例：

 1 .container{
 2     width:300px;
 3     height:300px;
 4     background:#f1f1f1;
 5     display:flex;
 6     justify-content:center;
 7     align-items:center;
 8 }
 9 .box{
10     width:50px; /*宽度任意*/
11     height:50px; /*高度任意*/
12     border:1px solid #333;
13 }
14 <div class="container">
15     <div class="box"></div>
16 </div>
View Code

方法5：利用弹性盒子(margin:auto;)实现，只测试了Chrome，如下示例：

 1 .container {
 2     width:300px;
 3     height:300px;
 4     background:#f1f1f1;
 5     display:flex;
 6 }
 7 .item {
 8     width:50px; /*宽度任意*/
 9     height:50px; /*高度任意*/
10     margin:auto;
11     border:1px solid #333;
12 }
13 <div class="container">
14     <div class="item">item</div>
15 </div>
View Code

 

posted @ 2016-04-30 11:34  i_can_do  阅读(1093)  评论(0)  编辑  收藏  举报