理解:before伪类搭配vertical-align:middle实现垂直居中的原理

2019-10-11 admin

前言

总所周知,“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
  • 父元素基线的位置可改变

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

原文地址:https://guoyunfeng.com/2019/1…

[转载]原文链接:https://segmentfault.com/a/1190000020646920

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77117.html

文章标题:理解:before伪类搭配vertical-align:middle实现垂直居中的原理

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
回到顶部