前言
今天来瞧瞧一个之前困惑我很久的问题，在CSS中，水平垂直居中，能有几种写法。
办法一：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;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000000;
}
img{
}
HTML代码：
<div>
<img src="avatar.jpg">
</div>
效果图：
marginauto.png办法三：margin:负数法
margin能够为负数是我在牛客上报了个课之后才学到的，在那之前始终无试过。
道理其实跟办法一差不多，经过百分比将照片移动到容器中心，再对齐中心点就行了。
要记住margin倘若是负数的话便是向该方向移动，例如margin-left:-100px;，便是向左移动100px。它与正常添加margin是撑开正好相反。
还不明白能够去写个小demo就懂啦。
CSS代码：
div{
width: 600px;
height: 600px;
position: relative;
border: 1px solid #000000;
}
img{
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -
| 
发表于 2024-6-30 05:28:20
