需 父元素设置相对低位 已知子元素宽高 relative ：相对于起始位置的定位 ，起始位置基于父元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='app'> <div class="a">aaaa</div> </div> </body> <style> #app { position: relative; width: 400px; height: 400px; background-color: cornflowerblue; } .a { width: 200px; height: 200px; background: green; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } </style> </html>与上一种道理一样，不过不用知道宽高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='app'> <div class="a">aaaa</div> </div> </body> <style> #app { position: relative; width: 400px; height: 400px; background-color: cornflowerblue; } .a { background: green; position: absolute; left: 50%; /* 定位父级的50% */ top: 50%; transform: translate(-50%, -50%); /*自己的50% */ } </style> </html>常用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='app'> <div class="a">aaaa</div> </div> </body> <style> #app { display: flex; width: 400px; height: 400px; background-color: cornflowerblue; justify-content: center; align-items: center; } .a { background-color: brown; } </style> </html>