1.display: table-cell + vertical-align: middle
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>垂直居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{width:4em;height:500px;} .child{width:100%;} .parent{ display: table-cell; vertical-align: middle; } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
2.position + transform
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>垂直居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{width:4em;height:500px;} .child{width:100%;} .parent{ position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
3.display: flex + align-items: center
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>垂直居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{width:4em;height:500px;} .child{width:100%;} .parent{ display: flex; align-items: center; } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
附录：demoe.css
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;} .parent{background:#ddd;} .child{background:#666;color:#fff;}