<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>居中</title> <style type="text/css"> .box{ display: flex; width: 100%; height: 500px; border: 1px solid #333; flex-direction: row; /* 子元素横向排列 */ justify-content: center; /* 相对父元素水平居中 */ align-items: center; /* 子元素相对父元素垂直居中 */ } .cont{ width: 30%; height: 100px; border: 1px solid red; flex-grow:1;/* 属性用于设置或检索弹性盒的扩展比率。 */ } </style> </head> <body> <div class="box"> <div class="cont">aaaaa</div> <div class="cont">aaaaa</div> </div> </body> </html>