CSS 垂直居中的正确打开方式
<h2 style="color: black; text-align: left; margin-bottom: 10px;">前言之爆锤面试官神器 - CSS</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><span style="color: black;">或</span>是求职面试中，css 垂直居中<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;">其实垂直居中<span style="color: black;">重点</span>分为了两种类型：居中元素宽高已知 和 居中元素宽高未知，<span style="color: black;">那样</span><span style="color: black;">咱们</span>就结合这两种类型来一一做举例。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-c20962710c39aaca32d2e1b9fd05aed7_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>css 垂直居中.png<h2 style="color: black; text-align: left; margin-bottom: 10px;">居中元素宽高已知</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1. absolute + margin auto</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">顾名思义，<span style="color: black;">便是</span>利用当前元素的 position: absolute; 和 margin: auto;</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;"><span style="color: black;">经过</span>将各个方向的距离都设置为 0，此时将 margin 设置为 auto，就<span style="color: black;">能够</span>实现垂直居中<span style="color: black;">表示</span>了；</p>
<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;">.parent{
position: relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
bac<span style="color: black;">公斤</span>round: tomato;
width: 50vw; height: 50vh;
/* 核心代码 */
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}</div>
<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;"><img src="https://pic4.zhimg.com/80/v2-9e7035a5806c0e789e33fd28d6fb7337_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>image-20210729232149048.png<h3 style="color: black; text-align: left; margin-bottom: 10px;">2. absolute + 负 margin</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">利用绝对定位百分比 50% 来实现，<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>再用负的 margin-top 和 margin-left 来进行简单的位移<span style="color: black;">就可</span>，<span style="color: black;">由于</span><span style="color: black;">此刻</span>的负 margin 是基于<span style="color: black;">自己</span>的高度和宽度来进行位移的。</p>
<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;">.parent{
position:relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
bac<span style="color: black;">公斤</span>round: tomato;
width: 100px; height: 100px;
/* 核心代码 */
position:absolute;
top: 50%; left: 50%;
margin-top: -50px;
margin-left: -50px;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">详细</span>效果如下：</h3>
同意、说得对、没错、我也是这么想的等。 论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。 论坛是一个舞台，让我们在这里尽情的释放自己。 感谢楼主分享，祝愿外链论坛越办越好！
页:
[1]