CSS实现水平垂直居中（多办法）
<h3 style="color: black; text-align: left; margin-bottom: 10px;">前言</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">今天来<span style="color: black;">瞧瞧</span>一个之前<span style="color: black;">困惑</span>我很久的问题，在CSS中，水平垂直居中，能有几种写法。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一：margin:auto</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">子绝父相，当元素绝对定位的时候，会<span style="color: black;">按照</span><span style="color: black;">近期</span>父元素进行定位，利用这个特性，<span style="color: black;">咱们</span>有了这种<span style="color: black;">办法</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">div{
width: 600px;
height: 600px;
position: relative;
border: 1px solid #000000;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div>
<img src="avatar.jpg">
</div>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-af9b0ddad13e45c5f373a741deda95f8_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>marginauto.png<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二：flex弹性盒子法</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">利用flex，align-items:center是<span style="color: black;">掌控</span>垂直方向居中，justify-content:center是<span style="color: black;">掌控</span>水平方向的居中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">div{
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000000;
}
img{
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div>
<img src="avatar.jpg">
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-af9b0ddad13e45c5f373a741deda95f8_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>marginauto.png<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>三：margin:负数法</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">margin<span style="color: black;">能够</span>为负数是我在牛客上报了个课之后才学到的，在那之前<span style="color: black;">始终</span><span style="color: black;">无</span>试过。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">道理其实跟<span style="color: black;">办法</span>一差不多，<span style="color: black;">经过</span>百分比将<span style="color: black;">照片</span>移动到容器中心，再对齐中心点就行了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">要记住margin<span style="color: black;">倘若</span>是负数的话<span style="color: black;">便是</span>向该方向移动，例如margin-left:-100px;，<span style="color: black;">便是</span>向左移动100px。它与正常添加margin是撑开正好相反。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 还不明白<span style="color: black;">能够</span>去写个小demo就懂啦。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">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: -</div>
你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。
页:
[1]