<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试模板</title> <style> *{ margin: 0; padding: 0px; } /* 第一种 .parent{ 400px;height: 200px;background: #797099; position: relative; } .child{ 200px;height: 100px;background: #eee; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin:auto; } */ /* 第二种 .parent{ 400px;height: 200px;background: #797099; display:table-cell; vertical-align:middle; } .child{ 200px; height: 100px; background: #eee; border:2px solid #333; margin: 0 auto; } */ /* 第三种 .parent{ 400px;height: 200px;background: #797099; display:table-cell; vertical-align:middle; text-align: center; } .child{ 200px; height: 100px; background: #eee; border:2px solid #333; display: inline-block; } */ /* 第四种 .parent{ 400px;height: 200px;background: #797099; display: flex; } .child{ 200px; height: 100px; background: #eee; border:2px solid #333; margin:auto } */ /* 第五种 .parent{ 400px;height: 200px;background: #797099; display: flex; justify-content: center; align-items: center; } .child{ 200px; height: 100px; background: #eee; border:2px solid #333; } */ .parent{ width:400px;height: 200px;background: #797099; position: relative; } .child{ width: 300px; height: 100px; background: #eee; border:2px solid #333; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); } </style> </head> <body> <div class="parent" > <div class="child"></div> </div> </body> </html>