相信你都是在兼容垂直居中而烦恼，翻阅多个网站总是找不到理想的方法而苦恼，来到这里你的问题解决了！如果对你有帮助请点个赞，谢谢。
多兼容垂直居中，在IE6-9亲自测试并通过
<!doctype html> <html> <head> <meta charset="utf-8"> <title>不定高垂直居中(IE6+)</title> <style> html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden} /* 不定高垂直居中(IE6+) */ /* PS:<div class="valigner-fix"></div>必须要有，为了兼容 */ .valigner{/* 填写固定高度 */} .valigner-fluid{display:table;width:100%;height:100%;min-height:100%} .valigner-wrap{display:table-cell;vertical-align:middle;width:100%;height:100%} .valigner-fix{display:none;width:1px;margin-left:-1px} /* 以下可用<!--[if lte IE 7]><![endif]-->包含 */ .valigner-fix,.valigner-body{*display:inline-block;*vertical-align:middle} .valigner-body{*width:100%} .valigner-fix{*height:100%} .valigner-fix,.valigner-body{*display:inline;/* 不能合并到上面 */} </style> </head> <body> <div class="valigner-fluid"> <div class="valigner-wrap"> <div class="valigner-body"> 不定高垂直居中(IE6+) </div> <div class="valigner-fix"></div> </div> </div> </body> </html>
swiper的居中方案（CSS3），要求高
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>swiper的居中方案（CSS3）</title> <style> html, body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } /* swiper的居中方案 */ .swiper-center { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 100%; height: 100%; } .swiper-center-body {} </style> </head> <body> <div class="swiper-center"> <div class="swiper-center-body"> <p>swiper的居中方案（CSS3），要求高</p> <p>swiper的居中方案（CSS3），要求高</p> </div> </div> </body> </html>
sencha的x-center居中方案（CSS3），要求高
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>sencha的x-center居中方案（CSS3）</title> <style> html, body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } /* sencha的.x-center */ .x-center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .x-center>* { position: relative } .x-center-body { } </style> </head> <body> <div class="x-center"> <div class="x-center-body">sencha的x-center居中方案（CSS3），要求高</div> </div> </body> </html>