前言之爆锤面试官神器 - CSS
没论是实质研发中，也或是求职面试中，css 垂直居中常常都是一个绕不开的专题，其中不乏有许多面试者在多次双重尝受打击之后，而无一个很好的反击点，刚好结合自己以前受的委屈和痛苦，来给大众一个锤爆面试官大佬们的机会。
其实垂直居中重点分为了两种类型：居中元素宽高已知 和 居中元素宽高未知，那样咱们就结合这两种类型来一一做举例。
css 垂直居中.png居中元素宽高已知
1. absolute + margin auto
顾名思义，便是利用当前元素的 position: absolute; 和 margin: auto;
重视运用此办法：父元素与当前元素的高度要设置；
经过将各个方向的距离都设置为 0，此时将 margin 设置为 auto，就能够实现垂直居中表示了；
详细代码如下：
.parent{
position: relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
bac公斤round: tomato;
width: 50vw; height: 50vh;
/* 核心代码 */
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
详细效果如下：
image-20210729232149048.png2. absolute + 负 margin
利用绝对定位百分比 50% 来实现，由于当前元素的百分比是基于相对定位（亦便是父元素）来定位的;
而后再用负的 margin-top 和 margin-left 来进行简单的位移就可，由于此刻的负 margin 是基于自己的高度和宽度来进行位移的。
详细代码如下：
.parent{
position:relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
bac公斤round: tomato;
width: 100px; height: 100px;
/* 核心代码 */
position:absolute;
top: 50%; left: 50%;
margin-top: -50px;
margin-left: -50px;
}
详细效果如下：
| 
发表于 2024-6-30 05:21:02
