CSS垂直居中的11种实现方式

时间：2017-01-20 19:19:53 阅读：260 评论：0 收藏：0 [点我收藏+]

使用绝对定位和负外边距对块级元素进行垂直居中

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 150px;
19             height: 100px;
20             background: orange;
21             position: absolute;
22             top: 50%;
23             margin: -50px 0 0 0;
24             line-height: 100px;
25         }
26     </style>
27 
28     <body>
29 
30         <div id="box">
31             <div id="child">我是测试DIV</div>
32         </div>
33 
34     </body>
35 
36 </html>

效果：
注意：这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。

使用绝对定位和transform

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             background: #93BC49;
19             position: absolute;
20             top: 50%;
21             transform: translate(0, -50%);
22         }
23     </style>
24 
25     <body>
26 
27         <div id="child">
28             我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
29         </div>
30 
31     </body>
32 
33 </html>

效果：
注意：这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

另外一种使用绝对定位和负外边距进行垂直居中的方式

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 50%;
19             height: 30%;
20             background: pink;
21             position: absolute;
22             top: 50%;
23             margin: -15% 0 0 0;
24         }
25     </style>
26 
27     <body>
28 
29         <div id="box">
30             <div id="child">我也是个测试DIV</div>
31         </div>
32 
33     </body>
34 
35 </html>

效果：
注意：这种方式的原理实质上和前两种相同。补充的一点是：margin的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。

绝对定位结合margin: auto

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 200px;
19             height: 100px;
20             background: #A1CCFE;
21             position: absolute;
22             top: 0;
23             bottom: 0;
24             margin: auto;
25             line-height: 100px;
26         }
27     </style>
28 
29     <body>
30 
31         <div id="box">
32             <div id="child">呆呆今天退役了(。﹏。)</div>
33         </div>
34 
35     </body>
36 
37 </html>

效果：
注意：
　　这种实现方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，我这里设成了0，当然你也可以设为99999px或者-99999px无论什么，只要两者相等就行，这一步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。

　　被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现。

使用padding实现子元素的垂直居中

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             background: #ddd;
13             padding: 100px 0;
14         }
15         
16         #child {
17             width: 200px;
18             height: 100px;
19             background: #F7A750;
20             line-height: 50px;
21         }
22     </style>
23 
24     <body>
25 
26         <div id="box">
27             <div id="child">今天西安的霾严重的吓人，刚看了一眼PM2.5是422</div>
28         </div>
29 
30     </body>
31 
32 </html>

效果：
注意：
　　这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。

　　这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。

设置第三方基准

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14         }
15         
16         #base {
17             height: 50%;
18             background: #AF9BD3;
19         }
20         
21         #child {
22             height: 100px;
23             background: rgba(131, 224, 245, 0.6);
24             line-height: 50px;
25             margin-top: -50px;
26         }
27     </style>
28 
29     <body>
30 
31         <div id="box">
32             <div id="base"></div>
33             <div id="child">今天写了第一篇博客，希望可以坚持写下去！</div>
34         </div>
35 
36     </body>
37 
38 </html>

效果：
注意：这种方式也非常简单，首先设置一个高度等于父元素高度一半的第三方基准元素，那么此时该基准元素的底边线自然就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个margin-top，值的大小是它自身高度的一半取负，则实现垂直居中。

使用flex布局

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: flex;
15             align-items: center;
16         }
17     </style>
18 
19     <body>
20 
21         <div id="box">雾霾天气，太久没有打球了</div>
22 
23     </body>
24 
25 </html>

效果：

第二种使用弹性布局的方式

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: flex;
15             flex-direction: column;
16             justify-content: center;
17         }
18         
19         #child {
20             width: 300px;
21             height: 100px;
22             background: #08BC67;
23             line-height: 100px;
24         }
25     </style>
26 
27     <body>
28 
29         <div id="box">
30             <div id="child">
31                 答案当然是多用绿色的背景哈哈
32             </div>
33         </div>
34 
35     </body>
36 
37 </html>

效果：

还有一种在前面已经见到过很多次的方式就是使用 line-height 对单行文本进行垂直居中

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             line-height: 300px;
15         }
16     </style>
17 
18     <body>
19 
20         <div id="box">
21             我是一段测试文本
22         </div>
23     </body>
24 
25 </html>

效果：
注意：这里有一个小坑需要大家注意：line-height(行高) 的值不能设为100%，我们来看看官方文档中给出的关于line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距。所以大家就明白了，这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。

使用 line-height 和 vertical-align 对图片进行垂直居中

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             line-height: 300px;
15         }
16         
17         #box img {
18             vertical-align: middle;
19         }
20     </style>
21 
22     <body>
23 
24         <div id="box">
25             <img src="duncan.jpeg">
26         </div>
27     </body>
28 
29 </html>

效果：

使用 display 和 vertical-align 对容器里的文字进行垂直居中

代码：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: table;
15         }
16         
17         #child {
18             display: table-cell;
19             vertical-align: middle;
20         }
21     </style>
22 
23     <body>
24 
25         <div id="box">
26             <div id="child">我也是一段测试文本</div>
27         </div>
28     </body>
29 
30 </html>

效果：

CSS垂直居中的11种实现方式

原文：http://www.cnblogs.com/panda-ling/p/6323535.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)