<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>002</title> <style> .wrapper { position: relative; width: 500px; height: 500px; background-color: #ddd; } .content{ background-color:#6699FF; width:200px; height:200px; position: absolute; top: 50%; margin-top:-100px ; /* 用top和left的50%来定位,用margin-top和margin-left自身宽度的一半的负值来实现水平居中 */ left: 50%; margin-left: -100px; } </style> </head> <body> <div class="wrapper"> <div class="content"></div> </div> </body> </html>
CSS实现垂直水平居中
最新推荐文章于 2024-07-16 20:51:21 发布