<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .partent{ 200px; height: 200px; border: 1px solid #ccc; position: relative; /* 3-1.inline-block + text-align + table-cell + vertical-align（单元格方式） */ /* text-align:center; display:table-cell; vertical-align:middle; */ /* 4.flex + justify-content + align-items（弹性模型） */ display: flex; justify-content: center; /* 水平居中 */ align-items:center; /*垂直居中*/ } .cjild{ 50px; height: 50px; border: 1px solid #ccc; /* 1.定位 + margin */ /* position: absolute; left: 50%; top: 50%; margin:-25px 0 0 -25px */ /* 2.定位 + margin */ /* margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; */ /* 3-2 .inline-block + text-align + table-cell + vertical-align（单元格方式） */ /* display:inline-block; */ } </style> <body> <div class="partent"> <div class="cjild"></div> </div> </body> </html>