回复下方公众号【面试宝典】，即可获取为你整理的107页后端笔试题。
序言：锤子笔试官方武器-CSS
无论是在实际开发中，还是在求职笔试中，CSS垂直居中往往是一个绕不开的话题。 不少考生在反复的双手打压下，都没有找到好的反击点。css居中样式，就结合我所受过的委屈和痛苦css居中样式，我给你们一个粉碎笔试官大鳄的机会。
虽然垂直居中主要分为两种：居中元素的宽度和高度已知和居中元素的宽度和高度未知，所以我们将结合这两种类型来一一举例。
居中元素的宽度和高度已知
绝对+自动边距
顾名思义，就是借助当前元素的position:absolute; 和保证金：自动；
使用该方法注意：要设置父元素和当前元素的高度；
将各个方向的距离设置为0，此时将margin设置为auto，即可实现垂直居中显示；
具体代码如下：
.parent{
position: relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
background: tomato;
width: 50vw; height: 50vh;
/* 核心代码 */
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
复制代码
具体疗效如下：
绝对+负边距
是通过使用50%的绝对定位比例来实现的，因为当前元素的比例是基于相对定位（即父元素）来定位的；
然后使用负的margin-top和margin-left进行简单的位移，因为目前负的margin是根据自己的高度和长度来进行位移的。
具体代码如下：
.parent{
position:relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
background: tomato;
width: 100px; height: 100px;
/* 核心代码 */
position:absolute;
top: 50%; left: 50%;
margin-top: -50px;
margin-left: -50px;
}
复制代码
具体疗效如下：
绝对+计算
使用CSS3的一个估计函数来估计； 方法和前面类似
具体代码如下：
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
position:relative;
}
.child{
background: tomato;
width: 200px; height: 200px;
/* 核心代码 */
position:absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
复制代码
具体疗效如下：
居中元素的宽度和高度未知
绝对+变换
借助CSS3的新特性变换； 如果transform的translate属性的值为百分比，那么这个比例会根据自身的宽度和高度来估计。
具体代码如下：
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
position:relative;
}
.child{
background: tomato;
/* 核心代码 */
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
复制代码
具体疗效如下：
行高+垂直对齐
设置当前元素为行内元素，然后通过设置父元素的text-align:center实现水平居中；
同时通过设置当前元素的vertical-align:middle来实现垂直居中；
最后设置line-height:initial; 当前元素的行高继承父元素的行高。
具体代码如下：
.parent{
width: 90vw;
border: 3px solid steelblue;
/* 核心代码 */
line-height: 500px;
text-align: center;
}
.child{
background: tomato;
/* 核心代码 */
display: inline-block;
vertical-align: middle;
line-height: initial;
}
复制代码
具体疗效如下：
表格元素
使用最经典的table元素来进行水平和垂直居中，但代码看起来多余，不推荐；
具体代码如下：
<td class="parent">
<div class="child">
.parent {
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
text-align: center;
}
.child {
background: tomato;
/* 核心代码 */
display: inline-block;
}
复制代码
具体疗效如下：
css-table 表格样式
如果你必须使用table的特性，又不想写table元素，那么css-table就非常适合你；
具体代码如下：
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
background: tomato;
/* 核心代码 */
display: inline-block;
}
复制代码
具体疗效如下：
弹性布局 (1)
如果要说现在比较流行、用的比较多的布局方案，那就非flex莫属了。 下面举两个最常见的使用方法的例子~
直接在flex-container上几行代码就可以甜蜜地实现
具体代码如下：
.parent {
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: flex;
justify-content: center;
align-items: center;
}
.child{
background: tomato;
}
复制代码
justify-content 表示：设置或检索弹性袋元素在主轴（垂直轴）方向的对齐方式；
align-items的意思是：定义flex item在flex容器当前行的横轴（横轴）方向上的对齐方式。
具体疗效如下：
弹性+自动边距 (2)
Flex-item 上更高贵的实现
具体代码如下：
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: flex;
}
.child{
background: tomato;
/* 核心代码 */
margin: auto;
}
复制代码
具体疗效如下：
有两种使用 flex 的方法，即使你愿意
给一张flex兼容性图
网格布局（1）
相信大家在实际项目中很少用到网格布局。 主要原因是布局过于高级，导致兼容性不是那么理想，而且未经证实网格的能力绝对是CSS布局的质的飞跃。
CSSGrid 包含与 Flexbox 几乎相同的对齐选项，因此我们可以在 grid-container 上优雅地实现它
具体代码如下：
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: grid;
align-items: center;
justify-content: center;
}
.child{
background: tomato;
}
复制代码
具体疗效如下：
网格布局（2）
同样，我们可以在Flexbox这样的grid-item上实现堂堂正正的实现
具体代码如下：
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: grid
}
.child{
background: tomato;
/* 核心代码 */
align-self: center;
justify-self: center;
}
复制代码
具体疗效如下：
Flex的两种使用方式选择，就算你高兴
给一张网格兼容性图
总结
学习完11种垂直居中布局方法，我们来简单总结一下
写在最后
上面虽然是垂直居中的方法，但是比较常见。 虽然还有一些比较小的表单技巧，比如伪类元素、grid-template-rows 的 grid-container 等等，大家可以自己尝试一下~
-结尾-
近期新课程：
Vue 基础知识 | 小程序开发 | JQuery 入门 | PC端页面布局 | 打字稿 | JS 基本运算符 | 数据类型之间的存储差异服务器端渲染和客户端渲染|
发表评论