css 实现水平垂直居中的三种常用办法
<h2 style="color: black; text-align: left; margin-bottom: 10px;">css 实现水平垂直居中的三种常用<span style="color: black;">办法</span></h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">首要</span>基本结构样式</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><body>
<div class="box">
<span></span>
</div>
</body></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">使里面的span元素（粉色圆点）水平垂直居中于其div父元素（淘宝色正方形）</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">实现的效果图如下：</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-9fa827c9276a8a7d8b7973be1e472f0c_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">下面是常用的三种<span style="color: black;">办法</span>：</h3>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.定位</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
bac<span style="color: black;">公斤</span>round: #f40;
position: relative;
margin: 200px auto;
}
.box span{
width: 20px;
height: 20px;
bac<span style="color: black;">公斤</span>round: pink;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -10px;
top:50%;
margin-top: -10px;
}
</style></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2.flex 设置主轴及侧轴方向居中</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
bac<span style="color: black;">公斤</span>round: #f40;
margin: 200px auto;
display: flex;
justify-content: center;
align-items: center;
}
.box span{
width: 20px;
height: 20px;
bac<span style="color: black;">公斤</span>round: pink;
border-radius: 50%;
}
</style></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3.最简单，最直接，最牛逼</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">直接在子元素span下设置 margin : auto;<span style="color: black;">就可</span></h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
bac<span style="color: black;">公斤</span>round: #f40;
margin: 200px auto;
display: flex;
}
.box span{
width: 20px;
height: 20px;
bac<span style="color: black;">公斤</span>round: pink;
border-radius: 50%;
margin: auto;
}
</style></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">总结：</h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">以上三种<span style="color: black;">办法</span>在<span style="color: black;">咱们</span>的<span style="color: black;">实质</span>场景中经常会用到，<span style="color: black;">因此</span><span style="color: black;">咱们</span>要<span style="color: black;">熟悉</span><span style="color: black;">把握</span>。</h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">还有我个人<span style="color: black;">意见</span><span style="color: black;">运用</span>后两种，不<span style="color: black;">意见</span><span style="color: black;">运用</span><span style="color: black;">第1</span>种，后两种简单，采用flex布局，避免用定位。</h3>
seo常来的论坛，希望我的网站快点收录。 “BS”（鄙视的缩写）
页:
[1]