标签：方式 top 避免 doc absolute 平移 布局 bottom 通用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> </style> </head> <body> <div class="father"> <div class="son">son</div> </div> </body> </html>
.father { width: 500px; height: 500px; position: relative; background-color: red; } .son { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; background-color: black; }
.father{ width: 1000px; height: 600px; position: relative; background-color: red; } .son { background-color: #fff; width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.father { width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; background-color: red; } .son { width: 200px; height: 200px; background-color: black; }
.father { width: 500px; height: 500px; position: relative; background-color: red; } .son { width: 200px; height: 200px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: black; }
标签：方式 top 避免 doc absolute 平移 布局 bottom 通用
原文地址：https://www.cnblogs.com/1012hq/p/12322500.html
