<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css_居中</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } .div1 { /*相對定位*/ /* position: relative; margin: 0 auto; top: 50%; transform: translateY(-50%);*/ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; height: 300px; background: yellow; } .div2 { /*绝对定位*/ /*position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 300px; height: 150px; background: red; text-align: center; line-height: 150px;*/ position: relative; margin: 0 auto; top: 50%; transform: translateY(-50%); width: 300px; height: 150px; background: red; text-align: center; line-height: 150px; } </style> </head> <body> <div class="div1"> <div class="div2">我要居中</div> </div> </body> </html>
css_居中
最新推荐文章于 2024-07-19 10:24:06 发布