CSS 垂直居中的正确打开方式
共 7603字,需浏览 16分钟
·
2022-07-04 22:19
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
前言之爆锤面试官神器 - CSS
无论是实际开发中,亦或者是求职面试中,css 垂直居中往往都是一个绕不开的话题,其中不乏有许多面试者在多次双重尝受打击之后,而没有一个很好的反击点,刚好结合自己以前受的委屈和痛苦,来给大家一个锤爆面试官大佬们的机会。
其实垂直居中主要分为了两种类型:居中元素宽高已知 和 居中元素宽高未知,那么我们就结合这两种类型来一一做举例。
![](https://filescdn.proginn.com/24f54195f331dca5d7448b77c6ac8022/79c59f204a8d50ebc1d1d23e087eddbe.webp)
居中元素宽高已知
1. absolute + margin auto
顾名思义,就是利用当前元素的 position: absolute;
和 margin: auto;
注意使用此方法:父元素与当前元素的高度要设置;
通过将各个方向的距离都设置为 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;
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/2c68c93ed6240e38a7d8cc068478c03b/34c7db9304e0dd122233af8d426e353c.webp)
2. absolute + 负 margin
利用绝对定位百分比 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;
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/f4d7ed4f290dfc775a205d052cda3066/56a343d6bd94e55dace8c527698b3488.webp)
3. absolute + calc
使用 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);
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/07255a7745ff3b1adb780e1bd6a1325a/1cfa20db5b29e55f7d5064451529067f.webp)
居中元素宽高未知
4. absolute + transform
利用 CSS3 的新特性 transform
;因为 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%);
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/07f78a158d636a43438eb04fa102d09e/14b3f41758b5145803c09e6ee9b64e36.webp)
5. line-height + vertical-align
把当前元素设置为行内元素,然后通过设置父元素的 text-align: center;
实现水平居中;
同时通过设置当前元素的 vertical-align: middle;
来实现垂直居中;
最后设置当前元素的 line-height: initial;
来继承父元素的line-height
。
具体代码如下:
.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;
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/967efc13927635e3e116321c42fb3877/48fc0181c7a60826cb5fedd9aad809d3.webp)
6. table 表格元素
通过最经典的 table 元素来进行水平垂直居中,不过代码看起来会很冗余,不推荐使用;
具体代码如下:
<table>
<tbody>
<tr>
<td class="parent">
<div class="child"></div>
</td>
</tr>
</tbody>
</table>
<style>
.parent {
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
text-align: center;
}
.child {
background: tomato;
/* 核心代码 */
display: inline-block;
}
</style>
复制代码
具体效果如下:
![](https://filescdn.proginn.com/ae81f90e1d2799fd364018133f61a6b3/7912d4556044a7c0528af096d456df05.webp)
7. 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;
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/fd50c5f83fa5c639115a6e089f484d74/56bf3d069eb3734accec8a31148cb765.webp)
8. flex 布局(一)
要说现在较为流行和使用较多的布局方案,那么非 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 子项在 flex 容器的当前行的侧轴(纵轴)方向上的对齐方式。
具体效果如下:
![](https://filescdn.proginn.com/bc0f5082d6a776c189a97578068720b8/df4688f1cbbf299554ea09e811d52536.webp)
9. flex + margin auto(二)
在 flex-item
上更加优雅的实现
具体代码如下:
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: flex;
}
.child{
background: tomato;
/* 核心代码 */
margin: auto;
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/dc5c28ea7806bf49ce7b47cb36b6d6a8/22aa6fa41636bda08cea19a3dce05efa.webp)
flex 的两种方法使用取舍,任凭您意
附赠 flex 兼容性图片一张
![](https://filescdn.proginn.com/ca62d0a424aec0347a10c84dbd3d7159/8eed61519a444981541be7657ff8a468.webp)
10. grid 网格布局 (一)
grid 布局相信大家在实际项目中用的较少,主要是该布局实在是太超前,导致了兼容性不是那么理想,但是不可否认的是 grid 的能力在 css 布局中绝对是一个质的飞越。
不熟悉的可以看下阮一峰老师的详细入门教程[1]
CSS Grid
包含与 Flexbox
几乎相同的对齐选项,因此我们可以在 grid-container
上优雅的实现
具体代码如下:
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: grid;
align-items: center;
justify-content: center;
}
.child{
background: tomato;
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/b620944c4024908fce399aec60297784/a7db6b35a090e3cc1420cafbd65bd430.webp)
11. grid 网格布局 (二)
同样我们可以像 Flexbox
一样,在 grid-item
上优雅的实现
具体代码如下:
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: grid
}
.child{
background: tomato;
/* 核心代码 */
align-self: center;
justify-self: center;
}
复制代码
具体效果如下:
![](https://filescdn.proginn.com/e373a150b6350336a2d94f2dada1f9b0/ddab8b36c842420bb08260f47fbca65e.webp)
flex 的两种方法使用取舍,任凭您高兴
附赠 grid 兼容性图片一张
![](https://filescdn.proginn.com/c28b9600ea56cd9c76b8bfd64df42e55/e3f03d0c5471719c2d69bd1511b63187.webp)
总结
在学习了上面的 11 种垂直居中布局方法后,我们简单概括一下
如果你的项目在 PC 端有兼容性要求并且宽高固定,推荐使用 absolute + 负 margin
方法实现;如果你的项目在 PC 端有兼容性要求并且宽高不固定,推荐使用 css-table
方式实现;如果你的项目在 PC 端无兼容性要求 ,推荐使用 flex
实现居中,当然不考虑 IE 的话,grid
也是个不错的选择;如果你的项目在移动端使用 ,那么推荐你使用 flex
,grid
也可作为备选。
写在最后
其实以上的是一种垂直居中方法,只是比较常见的,其实还有一些比较冷门的方式方法,例如 伪类元素、grid-container 的 grid-template-rows 等,大家下去可以自行尝试一下 ~
周末已结束,周一还会远吗,祝大家新的一周新的开始 ~
帅气美丽的你给个赞呗再走呗 ~
参考资料
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html: https://link.juejin.cn?target=https%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2019%2F03%2Fgrid-layout-tutorial.html
关于本文
来自:易师傅
https://juejin.cn/post/6991465721565806605
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
如果你觉得这篇内容对你有帮助,我想请你帮我2个小忙:
1. 点个「在看」,让更多人也能看到这篇文章 2. 订阅官方博客 www.inode.club 让我们一起成长 点赞和在看就是最大的支持