办法一：margin:auto
子绝父相，当元素绝对定位的时候，会按照近期父元素进行定位，利用这个特性，咱们有了这种办法。
CSS代码：
div{
width: 600px;
height: 600px;
position: relative;
border: 1px solid #000000;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML代码：
<div>
<img src="avatar.jpg">
</div>
效果图：
marginauto.png办法二：flex弹性盒子法
利用flex，align-items:center是掌控垂直方向居中，justify-content:center是掌控水平方向的居中。
CSS代码：
div{
width: 600px;
height: 600px;
发表于 2024-6-30 06:14:35
