分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

我:CSS垂直居中还有什么另类方法?求职者:不太理解了

  • 时间:2020-11-08 04:03 作者:前端_java爱好者 来源: 阅读:80
  • 扫一扫,手机访问
摘要:今天面试了一个前台实习生,我问了一个比较简单的问题,就是css如何实现元素垂直居中的问题,但是要说出多种方案。其实他说的不错,基本上说到了flex布局,grid布局等下面提到的布局。还不错,但是这几种都是已经经常用的,老生常谈,但是我想听到他说一种用的比较少的处理方案,理解一下他学习的深度和广度。但

今天面试了一个前台实习生,我问了一个比较简单的问题,就是css如何实现元素垂直居中的问题,但是要说出多种方案。其实他说的不错,基本上说到了flex布局,grid布局等下面提到的布局。还不错,但是这几种都是已经经常用的,老生常谈,但是我想听到他说一种用的比较少的处理方案,理解一下他学习的深度和广度。但是很遗憾他没有说出来。

今天就给大家讲一讲这个处理方案吧

众所周知,“css如何实现元素垂直居中?”已经是一个老生常谈的问题了,这个问题目前已经有了许多处理方案,这些方案也都有各自适用的场景以及优缺点,大致如下:

  • flex布局
  • grid布局
  • table布局
  • line-height搭配height
  • position搭配margin
  • position搭配transform

那么今天我们就来理解其中一种有效但不常被使用的方案的原理,它就是:伪元素:before搭配vertical-align:middle实现元素垂直居中,先来看一下具体的代码实现:

<style type="text/css">  .parent {    display: inline-block;    width: 300px;    height: 300px;    font-size: 0;    background: #80848f;    text-align: center;  }  .parent:before {    display: inline-block;    width: 20px;    height: 100%;    content: '';    background: #ff9900;    vertical-align: middle;  }  .child {    display: inline-block;    width: 50px;    height: 50px;    background: #19be6b;    vertical-align: middle;  }</style><div class="parent">  <div class="child">child</div></div>

上面的代码运行结果是这样的:

垂直居中

相信代码大家已经很熟习了,但是你真正了解其中的原理吗?下面我们就看一下它是如何怎么一步步实现垂直居中的

分析

首先我们要知道一个关键知识点,那就是:父元素基线(baseline)的位置是可以改变的,它不是固定的,记住这一点很重要

接着,我们精简一下代码,去掉关键部分

<style type="text/css">  .parent {    display: inline-block;    width: 300px;    height: 300px;    /* font-size: 0; */    background: #80848f;    text-align: center;  }  .parent:before {    display: inline-block;    width: 20px;    height: 100%;    content: '';    background: #ff9900;    /* vertical-align: middle; */  }  .child {    display: inline-block;    width: 50px;    height: 50px;    background: #19be6b;    /* vertical-align: middle; */  }</style><div class="parent">  <div class="child">child</div></div>

我们将font-size:0vertical-align:middle注释后,运行结果如下:

垂直居中

从图中不难看出,对于:before伪元素(以下简称伪元素)来说,加与不加vertical-align:middle,结果都是一样的,在垂直方向它始终会占满父元素;但对于.child元素情况就不同了,它在垂直方向的位置发生了改变,那么这是为什么呢?

其实伪元素在此处的作用就是为了改变(或者者叫重新定义)父元素baseline的位置,我们来回顾一下vertical-align:middle在MDN文档中的定义

注:middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐

那么,比照上面的示例:

  • 伪元素的中部就是它垂直方向的中点,这不难了解
  • 父元素的基线我们暂且不论它在哪里,我们只需记住它是可以改变的就足够了
  • x-height的一半,由于我们在父元素中将font-size置为0,所以x-height(小写x字母的高度)的一半也是0,即没有高度

这样一下,就相当于伪元素的中点只需与父元素的基线对齐即可以了,由于x-height是0,所以加与不加无所谓;再加上css中元素默认是左上方对齐的,对于这个限制,也就是说当伪元素加上vertical-align:middle后,默认情况下它是不会超出父元素的范围显示的,那么这时伪元素高度已确定:父元素高度的100%,中点也已确定

接下来伪元素就会对父元素说:我垂直方向的中点已经确定了,变是不可能变的,这辈子都不可能变,但我的中点想和你的基线对齐,你自己看着办吧

而后父元素妥协了,将它自身的基线移动到与伪元素中点水平对齐的位置,到此父元素基线的位置也已确定,近似其高度的一半

最后.child元素增加了自己的vertical-align:middle,按照middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐这句定义,.child元素的font-size因为继承关系也是0,所以它的中点也就自然而然与早已确定的父元素基线对齐,从而实现垂直居中,到此结束

总结

其实这种垂直居中方式的原理主要有以下几个要点:

  • css中元素默认是左上方对齐的
  • 伪元素高度与父元素保持统一
  • 父元素将font-size置为0,进而x-height也被置为0
  • 父元素基线的位置可改变

只需了解了原理,我们就不用死记硬背代码,也不会不记得如何实现;文中如有错误,欢迎指正~

对于垂直居中这种常见问题,哪种方案是你的最爱呢,欢迎留言探讨~

对了,小编为大家准备了一套2020最新的web前台资料,需要点击下方链接获取方式

学习前台,你掌握这些。二线也能轻松拿8K以上

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部