导航

垂直居中的几种方法

Posted on 2018-03-28 19:46  小飞博客  阅读(173)  评论(0)  编辑  收藏  举报

第一种:父元素宽高不确定,元素垂直水平居中  table   table-cell

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>水平垂直居中</title>
 6 </head>
 7 <style>
 8     *{margin: 0;padding: 0;}
 9     html,body{
10         height: 100%;
11     }
12     #wrap{
13         display: table;
14         width: 100%;
15         height: 100%;
16     }
17     #content{
18         display: table-cell;
19         vertical-align: middle;
20         background-color:#FFCCFF;
21         width:760px;
22     }
23     #insert{
24         text-align: center;
25         height: 200px;
26     }
27     #in{
28         display: inline-block;
29         width: 200px;
30         height: 200px;
31         background: cyan;
32         line-height: 200px;
33         text-align: center;
34     }
35 </style>
36 <body>
37     <div id="wrap">
38         <div id="content">
39             <div id="insert">
40                 <div id="in">中</div>
41             </div>
42         </div>
43     </div>
44 </body>
45 </html>

第二种:用定位的垂直水平居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>水平垂直居中</title>
 6 </head>
 7 <style>
 8     #in{
 9         position: absolute;
10         left: 0;
11         top:0;
12         bottom: 0;
13         right: 0;
14         margin: auto;
15         width: 200px;
16         height: 200px;
17         background: cyan;
18         line-height: 200px;
19         text-align: center;
20     }
21 </style>
22 <body>
23     <div id="in">中</div>
24 </body>
25 </html>

第三种:父元素子元素宽高确定了的水平垂直居中 box-sizing:border-box; padding挤到水中垂直居中即可

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>水平垂直居中</title>
 6 </head>
 7 <style scoped>
 8     *{margin: 0;padding: 0;}
 9     html,body{
10         height: 100%;
11     }
12     #box{
13         width: 600px;
14         height: 600px;
15         border: 1px solid #000;
16         box-sizing: border-box;
17         padding: 200px;
18     }
19     #in{
20         margin:0 auto;
21         width: 200px;
22         height: 200px;
23         background: cyan;
24         line-height: 200px;
25         text-align: center;
26     }
27 </style>
28 <body>
29     <div id="box">
30         <div id="in">中</div>
31     </div>
32 </body>
33 </html>

第四种:和第三种相似,只是没有用盒模型了 算好margin的值 就margin  : 值  auto;即可

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>水平垂直居中</title>
 6 </head>
 7 <style scoped>
 8     *{margin: 0;padding: 0;}
 9     html,body{
10         height: 100%;
11     }
12     #box{
13         width: 600px;
14         height: 600px;
15         border: 1px solid #000;
16     }
17     #in{
18         margin:200px auto;
19         width: 200px;
20         height: 200px;
21         background: cyan;
22         line-height: 200px;
23         text-align: center;
24     }
25 </style>
26 <body>
27     <div id="box">
28         <div id="in">中</div>
29     </div>
30 </body>
31 </html>

第五种:伸缩盒子

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>水平垂直居中</title>
 5 </head>
 6 <style type="text/css">
 7 html,body{
 8     height: 100%;
 9 }
10 body{
11     margin: 0;
12 }
13 .container{
14     height:100%;
15     display: flex; 
16     justify-content: center; 
17     align-items: center; 
18     text-align:center;
19     background: #ccc;
20 }
21 #box{
22     width: 100px;
23     height: 100px;
24     background: orange;
25     text-align: center;
26     line-height: 100px;
27 }
28 </style>
29 <body>
30 <div class="container">
31     <div id="box">中</div>
32 </div>
33 </body>
34 </html>

 第六种：tanslate（）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>垂直居中</title>
 6 </head>
 7 <style>
 8 html{
 9     height: 100%;
10 }
11     body{
12         margin: 0;padding: 0;
13         position: relative;
14         height: 100%;
15     }
16     #child{
17         width: 100px;
18         height: 100px;
19         background: red;
20         position: absolute;
21         top: 50%;
22         left: 50%;
23         transform:translate(-50%,-50%);
24     }
25 </style>
26 <body>
27     <div id="child"></div>
28 </body>
29 </html>

 

番外篇:布局 之 三列-两边固宽-中间自适应

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三列-两边固宽-中间自适应</title>
 6 </head>
 7 <style>
 8     html,
 9     body{
10         height: 100%;
11         position: relative;
12     }
13     body{
14         margin:0;
15         padding: 0;
16     }
17     .a,.c{
18         width: 100px;
19         height: 100%;
20         background: pink;
21         position: absolute;
22     }
23     .c{
24         right: 0;
25     }
26     .b{
27         position: absolute;
28         left: 100px;
29         height: 100%;
30         background: cyan;
31         width:calc(100% - 200px);
32     }
33 </style>
34 <body>
35     <div class="a"></div>
36     <div class="b"></div>
37     <div class="c"></div>
38 </body>
39 </html>

布局之 5列-两边固宽-中间3列自适应

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>5列-两边固宽-中间3列自适应</title>
 6 </head>
 7 <style>
 8     html,
 9     body{
10         height: 100%;
11         position: relative;
12     }
13     body{
14         margin:0;
15         padding: 0;
16     }
17     .a,.c{
18         width: 100px;
19         height: 100%;
20         background: pink;
21         position: absolute;
22     }
23     .c{
24         right: 0;
25     }
26     .b{
27         position: absolute;
28         left: 100px;
29         height: 100%;
30         background: cyan;
31         width:calc(100% - 200px);
32     }
33     .d1,.d2,.d3{
34         width:calc(100%/3);
35         height: 100%;
36         float: left;
37     }
38     .d1{
39         background: #ffcf42;
40     }
41     .d2{
42         background: #21ffff;
43     }
44     .d3{
45         background: #5a2cb5;
46     }
47 </style>
48 <body>
49     <div class="a"></div>
50     <div class="b">
51         <div class="d1"></div>
52         <div class="d2"></div>
53         <div class="d3"></div>
54     </div>
55     <div class="c"></div>
56 </body>
57 </html>

布局之 一边固宽一边自适应

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>一边固宽一边自适应</title>
 6 </head>
 7 <style>
 8     html,
 9     body{
10         height: 100%;
11         position: relative;
12     }
13     *{
14         margin:0;
15         padding: 0;
16     }
17     .a{
18         width: 100%;
19         height: 40px;
20         background: red;
21     }
22     .b{
23         height: 100%;
24         width: calc(100% - 100px);
25         background: #5a2cb5; 
26         float: left; 
27         text-align: center;
28         line-height: 40px;
29     }
30     .c{
31         height: 100%;
32         width: 100px;
33         background: yellow;
34         float: right; 
35         text-align: center;
36         line-height: 40px;
37     }
38 </style>
39 <body>
40     <div class="a">
41         <div class="b">自适应</div>
42         <div class="c">固宽</div>
43     </div> 
44 </body>
45 </html>