水平居中和垂直居中

2019-11-12 15:35:37 by冲冲

1、水平居中

（1）父级元素是行内元素，子级元素是行内元素，子级元素水平居中

① 设置父级元素为块级元素 display:block;

② 给父级元素添加 text-aglin:center;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   background-color: skyblue;        
 9   display:block;
10   text-align:center;
11 }   
12 #son {  
13   background-color: green;
14 }
15 </style>
16 </head>
17     
18 <body>
19 <span id="father">
20   <span id="son">我将居中</span>
21 </span>
22 </body>
23 </html>

（2）父级元素是块级元素，子级元素是行内元素，子级元素水平居中

① 给父级元素添加 text-aglin:center;

（3）父级元素是块级元素，子级元素是块级元素，子级元素水平居中

方案一

（31）父级元素和子级元素有宽度

① 给子级元素添加 margin: 0 auto;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11 }   
12 #son {  
13   width: 200px;
14   height: 100px;
15   background-color: green;
16   margin: 0 auto;
17 }
18 </style>
19 </head>
20     
21 <body>
22 <div id="father">
23   <div id="son">我将居中</div>
24 </div>
25 </body>
26 </html>

（32）父级元素有宽度，子级元素没有宽度（特点：会默认子元素的宽度和父元素一样）

① 设置子级元素为行内块元素 display:inline-block;

② 给父级元素添加 text-align:center;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   text-align: center;
12 }   
13 #son {  
14   background-color: green;
15   display: inline-block;
16 }
17 </style>
18 </head>
19     
20 <body>
21 <div id="father">
22   <div id="son">我将居中</div>
23 </div>
24 </body>
25 </html>

方案二 -- 使用定位属性

（31）父级元素和子级元素有宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中测试</title>
<style>   
#father { 
  width: 500px;
  height: 300px;
  background-color: skyblue;
  position: relative;
}   
#son { 
  width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;
  left: 150px;
}
</style>
</head>
    
<body>
<div id="father">
  <div id="son">我将居中</div>
</div>
</body>
</html>

（32）父级元素有宽度，子级元素没有宽度

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   position: relative;
12 }   
13 #son {  
14   background-color: green;
15   position: absolute;
16   left: 50%;/*元素的左侧居中，而非元素的中心居中*/
17   transform: translateX(-50%);/*把元素沿着横向(x轴)移动自身宽度的50%*/
18 }
19 </style>
20 </head>
21     
22 <body>
23 <div id="father">
24   <div id="son">我将居中</div>
25 </div>
26 </body>
27 </html>

注意：left:50%;不会中心居中，而是左边居中。

方案三 -- flexbox布局

使用flex布局，宽度有或无都OK。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   display: flex;
12   justify-content: center;
13 }   
14 #son { 
15   background-color: green;
16 }
17 </style>
18 </head>
19     
20 <body>
21 <div id="father">
22   <div id="son">我将居中</div>
23 </div>
24 </body>
25 </html>

2、垂直居中

（1）父级元素是块元素，子级元素是行内元素，子级元素垂直居中

（11）单行文本居中

① 父级元素设置行高等于盒子高 height=500px;line-height:500px;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   line-height: 300px;
12 }   
13 #son { 
14   background-color: green;
15 }
16 </style>
17 </head>
18     
19 <body>
20 <div id="father">
21   <div id="son">我将居中</div>
22 </div>
23 </body>
24 </html>

（12）多行文本居中

① 父级元素设置 display:table-cell;vertical-align:middle;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   display:table-cell;
12   vertical-align: middle; 
13 }   
14 #son { 
15   background-color: green;
16 }
17 </style>
18 </head>
19     
20 <body>
21 <div id="father">
22   <div id="son">我将居中我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</div>
23 </div>
24 </body>
25 </html>

（2）父级元素和子级元素都是块级元素

（21）父级元素和子级元素都有高度

方案一 -- 使用定位

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   position: relative; 
12 }   
13 #son { 
14   background-color: green;
15   height: 100px;
16   position: absolute;
17   top: 100px;
18 }
19 </style>
20 </head>
21     
22 <body>
23 <div id="father">
24   <div id="son">我将居中</div>
25 </div>
26 </body>
27 </html>

方案二 -- flexbox布局（子级元素高度有或无都OK）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   display: flex;
12   align-items: center;
13 }   
14 #son { 
15   background-color: green;
16   height: 100px;
17 }
18 </style>
19 </head>
20     
21 <body>
22 <div id="father">
23   <div id="son">我将居中</div>
24 </div>
25 </body>
26 </html>

（22）父级元素有高度，子级元素没有高度

方案一 -- 定位属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   position: relative;
12 }   
13 #son { 
14   background-color: green;
15   position: absolute;
16   top: 50%;
17   transform: translateY(-50%);
18 }
19 </style>
20 </head>
21     
22 <body>
23 <div id="father">
24   <div id="son">我将居中</div>
25 </div>
26 </body>
27 </html>

方案二 -- flexbox布局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   display: flex;
12   align-items: center;
13 }   
14 #son { 
15   background-color: green;
16 }
17 </style>
18 </head>
19     
20 <body>
21 <div id="father">
22   <div id="son">我将居中</div>
23 </div>
24 </body>
25 </html>

3、同时水平和垂直居中

（1）父级元素和子级元素都已知高度和宽度

① flexbox布局推荐

② 定位属性

（2）父级元素已知高度和宽度，子级元素没有高度和宽度

① flexbox布局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>居中测试</title>
 6 <style>   
 7 #father { 
 8   width: 500px;
 9   height: 300px;
10   background-color: skyblue;
11   display: flex;
12   justify-content: center;
13   align-items: center;
14 }   
15 #son { 
16   background-color: green;
17 }
18 </style>
19 </head>
20     
21 <body>
22 <div id="father">
23   <div id="son">我将居中</div>
24 </div>
25 </body>
26 </html>