<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .cc{ display: table; width:300px; height:300px; margin:30px auto; text-align:center; background:#00c1de; } p{ display:table-cell; background:green; vertical-align:middle; } </style> </head> <body> <div class="cc"> <p>1111</p> </div> </body> </html>
给父元素设置display:table 子元素设置display:table-cell;vertical-align:middle