这分为两种情况:
1、有宽高的情况下,实现水平和垂直居中
方法一:使用定位 position:absolute;left和top值为50%;然后margin的left和top减去宽高的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
position:absolute;
left:50%;
top:50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图:
![3872133-8c02c13ca6718ddf.png](https://i-blog.csdnimg.cn/blog_migrate/1426a6eced19dbcea02639e8ea2e6401.webp?x-image-process=image/format,png)
Paste_Image.png
方法二:使用定位position:absolute;四个方向值都是0,然后margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{