CSS实现垂直居中的方法
1、relative+absolute定位：
(1)css+html代码
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>Document</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .parent { 14 width: 400px; 15 height: 400px; 16 margin: 100px; 17 border: 1px solid red; 18 position: relative; 19 } 20 21 .child { 22 width: 200px; 23 height: 200px; 24 border: 1px solid green; 25 position: absolute; 26 top: 0; 27 left: 0; 28 right: 0; 29 bottom: 0; 30 margin: auto; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class="parent"> 37 父元素 38 <div class="child"> 39 子元素 40 </div> 41 </div> 42 </body> 43 44 </html>
(2)效果
(3)兼容性
兼容全部浏览器
2、flex布局：
(1)html+css代码
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>Document</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .parent { 14 width: 400px; 15 height: 400px; 16 margin: 100px; 17 border: 1px solid red; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 } 22 23 .child { 24 width: 200px; 25 height: 200px; 26 border: 1px solid green; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div class="parent"> 33 <div class="child"> 34 子元素 35 </div> 36 </div> 37 </body> 38 39 </html>
(2)效果
(3)兼容性
根据caniuse（http://caniuse.com/#search=flex）
对于IE浏览器，需要IE10以及以上。
3、relative+transform定位：
(1)html+css代码
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>Document</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .parent { 14 width: 400px; 15 height: 400px; 16 margin: 100px; 17 border: 1px solid red; 18 } 19 20 .child { 21 width: 200px; 22 height: 200px; 23 border: 1px solid green; 24 position: relative; 25 top: 50%; 26 left: 50%; 27 transform: translate(-50%, -50%); 28 } 29 </style> 30 </head> 31 32 <body> 33 <div class="parent"> 34 <div class="child"> 35 子元素 36 </div> 37 </div> 38 </body> 39 40 </html>
(2)效果
(3)兼容性
根据caniuse（http://caniuse.com/#search=translate）
对于IE浏览器，需要IE10以及以上。
总结：
根据项目浏览器兼容性要求，选择合适的垂直居中的方案。方案2和方案3适合用在移动端项目，方案1兼容性方面最好。
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
