html中元素盒子垂直居中的实现方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title>元素盒子垂直居中的实现方法</title> <style type="text/css"> #parent { width:500px; height:500px; background-color:#188eee; display: table;} #child { width:100px; height:auto; max-height:200px; overflow-y:scroll; display: table-cell; vertical-align: middle; } #child text{ display:block; width:80%; margin-left:10%; height:40px; line-height:40px; background-color:#fff; text-align:center; border-bottom:1px #f1f1f1 solid; } #child text:last-child{ border-bottom:0px; } </style> </head> <body> <div id="parent"> <div id="child"> <text>111</text> <text>222</text> <text>333</text> <text>444</text> <text>555</text> </div> </div> </body> </html>