自適應佈局+垂直居中

時間 2019-11-17

標籤自適應佈局垂直居中欄目 CSS 简体版

原文原文鏈接

1、自適應佈局css

一、頭尾固定高度中間高度自適應佈局：html

(1) 絕對定位：css3

 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改變盒子模型：web

 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：ide

 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

二、左固定右自適應寬度：佈局

方法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，左側採用絕對定位：flex

 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值：spa

 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

三、左固定右固定中間自適應寬度： 3d

方法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

2、垂直居中

一、單行文字垂直居中

利用 line-height 便可輕鬆實現，以下示例：

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

二、多行文本固定高度垂直居中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

三、多行文本固定高度垂直居中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

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

利用絕對定位來實現和 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

五、內容塊絕對居中(水平垂直居中)

方法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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。