常用垂直居中方法：
<!-- html结构 --> <body> <div class="wrap"> <div class="box"></div> </div> </body>
/* css样式 */
/* (1) 模仿单行文字居中的方式 */ .wrap { width: 200px; height: 80px; line-height: 80px; } .box { display: inline-block; vertical-align:middle; } /* (2) 已知宽高，通过position:absolute; */ .wrap { width: 200px; height: 200px; position: relative; } .box { width: 100px; height: 80px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -40px; } /* (3) 未知宽高，通过css3属性 transfrom */ .wrap { width: 200px; height: 200px; position: relative; } .box { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* (4) 通过flex布局 */ <!-- html结构 --> <body> <div class="wrap flexbox flexbox-center flexbox-middle"> <div class="box"></div> </div> </body> /* css样式 */ .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* 水平居中 */ .flexbox-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* 垂直居中 */ .flexbox-middle { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }