标签：transform class osi form document har style abs back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 100px; height: 100px; background-color: lightgreen; margin: 100px auto; } </style> </head> <body> <div class="box"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { position: relative; } .box { width: 100px; height: 100px; background-color: lightgreen; position: absolute; top: 100px; /* 移动了父元素宽度的一半* */ left: 50%; /* 移动了当前元素自己宽度一半 */ margin-left: -50px; } </style> </head> <body> <div class="box"></div> </body> </html>
3、通过位移的方式实现绝对定位的盒子居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { position: relative; } .box { width: 100px; height: 100px; background-color: lightgreen; position: absolute; left: 50%; top: 100px; transform: translate(-50%,0); } </style> </head> <body> <div class="box"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { position: relative; } .box { width: 100px; height: 100px; background-color: lightgreen; position: absolute; left: 50%; transform: translateX(-50%) translateY(100px); } </style> </head> <body> <div class="box"></div> </body> </html>
标签：transform class osi form document har style abs back
原文地址：https://www.cnblogs.com/houfee/p/9251682.html
