<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex的居中显示</title> <STYLE> #DIV1{ width: 200px; height: 200px; background-color: red; display: flex; justify-content:center; align-items: center; } #DIV2{ width: 100px; height: 100px; background-color: yellow; } </STYLE> </head> <body> <div ID="DIV1"> <div ID="DIV2"></div> </div> </body> </html>