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

时间：2019-11-12 20:33:33 阅读：131 评论：0 收藏：0 [点我收藏+]

标签：charset transform img 块元素 png center title 自身注意

水平居中和垂直居中

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>

② 定位属性

 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>

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

标签：charset transform img 块元素 png center title 自身注意

原文地址：https://www.cnblogs.com/yadiel-cc/p/11844386.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行