<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*定位方式一*/ .father{ position: absolute; text-align: center; } .son{ position: absolute; top:50%; left: 50%; margin-top: -50px; margin-left: -50px; } /*定位方式二*/ /*.father{ position: absolute; } .son{ position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); } */ /*定位方式三*/ /*.father{ position: absolute; } .son{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } */ /*flex方式*/ /*.father{ display: flex; } .son{ margin: auto; }*/ .size_fater{ width:300px; height: 300px; background-color: royalblue; } .size_son{ width:100px; height: 100px; background-color: red; } </style> </head> <body> <div class="father size_fater"> <div class="son size_son">子盒子居中</div> </div> </body> </html>
css 四种盒子垂直居中方式
最新推荐文章于 2024-07-06 00:15:59 发布