- 当前位置：首页 >数据库 >【爆肝面试系列】CSS 垂直居中的正确打开方式
【爆肝面试系列】CSS 垂直居中的正确打开方式
发布时间：2025-11-05 08:10:01 来源：码上建站 作者：域名
web-css-gaoji-jichu.jpeg
前言之爆锤面试官神器 - 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{
background: tomato;
width: 50vw; height: 50vh;
/* 核心代码 */
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
复制代码具体效果如下：
image-20210729232149048.png
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;
}
复制代码具体效果如下：
image-20210729232317142.png
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);
}
复制代码具体效果如下：
image-20210729232434257.png
居中元素宽高未知
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%);
}
复制代码具体效果如下：
image-20210729232624466.png
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;
}
复制代码具体效果如下：
image-20210729232748854.png
6. table 表格元素通过最经典的 table 元素来进行水平垂直居中，不过代码看起来会很冗余，不推荐使用；
具体代码如下：
.parent {
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
text-align: center;
}
.child {
background: tomato;
/* 核心代码 */
display: inline-block;
}
复制代码具体效果如下：
image-20210729233002861.png
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;
}
复制代码具体效果如下：
image-20210729233055305.png
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 容器的当前行的侧轴（纵轴）方向上的对齐方式。
具体效果如下：
image-20210729233155581.png
9. flex + margin auto（二）在 flex-item 上更加优雅的实现
具体代码如下：
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: flex;
}
.child{
background: tomato;
/* 核心代码 */
margin: auto;
}
复制代码具体效果如下：
image-20210729233243684.png
flex 的两种方法使用取舍，任凭您意附赠 flex 兼容性图片一张
image-20210725020146492.png
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;
}
复制代码具体效果如下：
image-20210729233416689.png
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;
}
复制代码具体效果如下：
image-20210729233458535.png
flex 的两种方法使用取舍，任凭您高兴附赠 grid 兼容性图片一张
image-20210725020025034.png
总结
在学习了上面的 11 种垂直居中布局方法后，云服务器我们简单概括一下
如果你的项目在 PC 端有兼容性要求并且宽高固定，推荐使用 absolute + 负 margin 方法实现；如果你的项目在 PC 端有兼容性要求并且宽高不固定，推荐使用 css-table 方式实现；如果你的项目在 PC 端无兼容性要求 ，推荐使用 flex 实现居中，当然不考虑 IE 的话，grid 也是个不错的选择；如果你的项目在移动端使用 ，那么推荐你使用 flex ，grid 也可作为备选。写在最后
其实以上的是一种垂直居中方法，只是比较常见的，其实还有一些比较冷门的方式方法，例如 伪类元素、grid-container 的 grid-template-rows 等，大家下去可以自行尝试一下 ~
- VivoX5Pro散热能力的评估（探索VivoX5Pro的散热效果及关键因素）
- HTCDesire7088（一部引领时代的智能手机）
- HP惠普Envy13（全新一代Envy系列带来前所未有的使用体验）
- 硬盘再生器修复教程（一步一步教你如何使用硬盘再生器修复损坏的硬盘）
- 常见的电脑设置错误及解决方法（避免电脑设置错误的关键注意事项）
- 使用51系统重装U盘的详细教程（一步步教你轻松重装系统，让电脑焕然一新）
- 打造完善的装机软件教程网站（为装机爱好者提供全面详细的软件安装指南）
- 以纯净镜像装系统教程（一步步教你如何利用纯净镜像轻松安装系统）
- 课桌电脑置物架的安装教程（简单易懂的步骤让你轻松安装电脑置物架）
- HP惠普Envy13（完美平衡轻便性和高性能，畅享生产力与娱乐）
- OPPOR9.11手机（OPPOR9.11手机）
- OPPOR7c电信和约机质量如何？（评测OPPOR7c电信和约机的性能和使用体验）
- 海尔重装系统教程（海尔重装系统教程详解，让你的电脑焕然一新）
- 新硬盘装系统教程（详细步骤图解，让你轻松搭建完美系统）
- 老桃毛装机教程（教你一步步自己动手，从零开始组装属于自己的电脑）
- 戴尔电脑安装Windows7系统教程（一步步教你如何在戴尔电脑上安装Windows7系统）
- 摩托罗拉XT1250（性能出众、摄影强大、超长续航，带给你无限可能）
- 以X270装机教程为主题的完美组装指南（教你如何轻松搭建一台高性能的X270电脑）
- 重装电脑脚本错误的解决方法（快速修复电脑重装脚本错误的技巧）
- 从OPPO刷MIUI系统到底如何？！（探索OPPO手机刷入MIUI系统的步骤和注意事项）
随便看看
- Copyright © 2025 Powered by 【爆肝面试系列】CSS 垂直居中的正确打开方式,码上建站 滇ICP备2023006006号-47sitemap