只需要在父元素中添加 display: table;
子元素中添加 display: table-cell;vertical-align: middle;
上代码:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <style type="text/css"> * { margin: 0; padding: 0; } .box { height: 200px; 100%; border: 1px solid beige; background-color: beige; } .box_in { height: 40%; 100%; text-align: center; background-color: salmon; display: table; margin-top: 20px; } .box_in span { display: table-cell; vertical-align: middle; } </style> <body> <div class="box"> <div class="box_in"> <span>内容文字</span> </div> </div> </body> </html>