【CSS】水平居中和垂直居中

時間 2019-11-18

標籤 CSS 水平居中垂直欄目 CSS 简体版

原文原文鏈接

水平居中和垂直居中

2019-11-12 15:35:37 by沖沖html

一、水平居中

（1）父級元素是行內元素，子級元素是行內元素，子級元素水平居中佈局

① 設置父級元素爲塊級元素 display:block;測試

② 給父級元素添加 text-aglin:center;flex

 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）父級元素是塊級元素，子級元素是行內元素，子級元素水平居中flexbox

① 給父級元素添加 text-aglin:center;spa

（3）父級元素是塊級元素，子級元素是塊級元素，子級元素水平居中code

方案一

（31）父級元素和子級元素有寬度orm

① 給子級元素添加 margin: 0 auto;htm

 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）父級元素有寬度，子級元素沒有寬度（特色：會默認子元素的寬度和父元素同樣）blog

① 設置子級元素爲行內塊元素 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>

二、垂直居中

（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>

三、同時水平和垂直居中

（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>

② 定位屬性

 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   top:50%;
18   transform:translateX(-50%) translateY(-50%);
19 }
20 </style>
21 </head>
22     
23 <body>
24 <div id="father">
25   <div id="son">我將居中</div>
26 </div>
27 </body>
28 </html>

相關標籤/搜索

每日一句

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