©2020-2024 ioDraw All rights reserved
方法一：常见的居中方法，定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
<title></title> <style type="text/css"> /*常见的居中:定位方法*/ .father{ width: 200px;
height: 200px; background-color: red; position: relative; } .child{
width:100px; height: 100px; background-color:blue; position: absolute; /* * top
bottom 为 0垂直居中 * left right 为0 则水平居中 */ top: 0; bottom: 0; right: 0; left: 0;
margin: auto; } </style> </head> <body> <!-- div 的几种居中方法 --> <div
style="width:200px;text-align: center; ">方法一：</div> <div class="father"> <div
class="child"></div> </div> </body> </html> } 方法二：负边距居中法 <!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">
/*负边距居中*/ .father2{ width: 200px; height: 200px; background-color: red;
position: relative; } .child2{ width: 100px; height: 100px;
background-color:blue; text-align: center; position: absolute; top: 50%; left:
50%; margin-top: -50px; margin-left: -50px; } </style> </head> <body> <!-- div
的几种居中方法 --> <div style="width:200px;text-align: center;">方法二：</div> <div
class="father2"> <div class="child2"></div> </div> </body> </html>
方法三：弹性布局居中（未知宽高也可以） <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
<title></title> <style type="text/css"> /*弹性布局居中（未知宽高也可以）*/ .father3{ width:
200px; height: 200px; background-color: red; margin-bottom: 100px; position:
relative; display: flex; align-items: center; justify-content: center; }
.child3{ width: 100px; height: 100px; background-color: blue; } </style>
</head> <body> <!-- div 的几种居中方法 --> <div style="width:200px;text-align:
center;">方法三：</div> <div class="father3"> <div class="child3"></div> </div>
</body> </html>