CSS属性教程

CSS继承属性

CSS 还有一个 all: unset; 属性吗？它可以瞬间把一个元素（比如令人讨厌的默认按钮样式）重置到最初始的原始状态。它能把元素身上那些浏览器自带的、烦人的默认样式（比如按钮的灰色背景、边框，或者 <a> 标签的蓝色下划线）通通抹除。

抹除之后的输入框和按钮（完全没有任何样式了）：

all 属性可以一次性改变除了 unicode-bidi 和 direction 以外的所有 CSS 属性。

• all: inherit;：让该元素的所有属性都向父元素看齐。
• all: initial;：把所有属性恢复到 CSS 规范定义的最初初始值（比如 display 会变成 inline，背景变成透明）。
• all: unset;（最常用）：这是前两者的结合。
  • 如果该属性是可继承的（比如字体颜色），就用 inherit。
  • 如果该属性是不可继承的（比如边框、背景），就用 initial。

引用CSS为控制继承提供了五个特殊的通用属性值，每个 CSS 属性都接收这些值。

可继承属性

你问到了继承属性，这在开发中非常重要。如果你在 body 上设置了样式，以下这些会自动流向所有子孙元素：

文字/字体类：color, font-family, font-size, font-weight, line-height, letter-spacing。

文本修饰类：text-align, text-indent, text-transform, direction, white-space。

列表类：list-style（这就是为什么给 ul 设置样式，li 的小圆点会变）。

表格类：border-collapse, border-spacing。

可见性：visibility（注意：opacity 并不继承，但父元素透明子元素视觉上也透明，这是两码事）。

绝不继承

这些属性只对设置了它们的元素生效，绝对不会传给孩子：

• 布局类：display, position, float, z-index。
• 盒子模型：width, height, margin, padding, border。
• 背景类：background（背景是不继承的，子元素看起来有背景只是因为它是透明的）。
• 溢出类：overflow。

CSS 变量 (Custom Properties)

CSS 变量就是现代 CSS 的“继承”新玩法

这是现代 CSS 最强大的“伪继承”机制。你可以定义一个变量，它会像基因一样遗传给所有后代：

:root {
  --main-color: #ff5722; /* 在根部定义变量 */
}

.card {
  /* 子元素可以随时调用这个遗传下来的“基因” */
  border: 1px solid var(--main-color);
}

.card button {
  background-color: var(--main-color);
}

object-fit

它的作用对象主要是那些内容由外部资源决定的元素。

object-fit 最常用于以下几个 HTML 元素：

• <img>：最常见的用法，防止图片在固定长宽的容器中被拉伸变形。
• <video>：用于控制视频内容在播放器窗口中的填充方式（比如全屏背景视频）。
• <canvas>：控制画布绘制内容在容器中的缩放。
• <iframe>：虽然支持，但由于安全和内容渲染原因，效果有时不如图片明显。
• <embed> 和 <object>：用于插件或外部资源的嵌入。

这里以200⨉200的图片为例子：

当设置和原始图片属性不一致的大小时，图片会拉伸适应

这时候object-fit就会设置怎么来拉伸

cover不改变比例铺满

container不改变比例铺到展示完整

fill充满整个容器（默认行为）：

none按照原始比例来显示

perspective

perspective-origin指定了观察者的位置

perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。

perspective: 1200px;

相应规则：

/* 一个值语法 */
perspective-origin: x-position;

/* 两个值语法 */
perspective-origin: x-position y-position;

/*当 x 位置和 y 位置都是关键字时，以下内容也是有效的 */
perspective-origin: y-position x-position;

• x-position

  指定消失点的横坐标，其值有以下形式：

  ​ <length-percentage>长度值或相对于元素宽度的百分比值，可为负值。

  ​ left, 关键字，0 值的简记。

  ​ center, 关键字，50% 的简记。

  ​ right, 关键字，100% 的简记。

• y-position

  指定消失点的纵坐标，其值有以下形式：

  ​ <length-percentage> 长度值或相对于元素高度的百分比值，可为负值。

  ​ top, 关键字，0 值的简记。

  ​ center, 关键字，50% 的简记。

  ​ bottom, 关键字，100% 的简记。

为元素设置perspective就相当于为元素添加1个观察者，默认观察者位于元素中心，比如为body添加之后就会这样

transform-style

transform-style: preserve-3d 是一个 CSS 3D变换属性，用来控制 子元素在3D空间中的呈现方式。

🌈 简单解释：

当你在一个元素上使用了 3D 变换（例如 rotateY()、translateZ() 等）， 默认情况下，它的子元素会被“拍扁”成二维平面。 如果你希望子元素也能在 三维空间中独立变换、保持深度感， 就要加上：

transform-style: preserve-3d;

要让 3D 效果真正生效，父级或更高层元素需要设置 perspective（透视）

举个例子：

<div class="parent">
  <div class="child">子元素</div>
</div>
<style>
.parent {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}

.child {
  transform: translateZ(100px);
  background: lightcoral;
  width: 100px;
  height: 100px;
}
</style>

解释：

• parent 设置了 transform-style: preserve-3d → 告诉浏览器“我里面的子元素要保持三维关系”。
• child 被往 Z 轴方向推了 100px。
• 如果不加 preserve-3d，child 就会被压扁在父元素平面上，看不出 3D 深度。

⚙️ 常见取值

父元素不设置透视，子元素也可以向z移动。（设置了perspective也可以）

同时设置perspective和preserve-3d？啥计算规则

区别

一句话概括它们的区别是：

perspective 负责给你一个“观察角度”（产生深度感）但是实际上还是一个平面！也就是展现的有立体感 transform-style: preserve-3d 负责让子元素在这个三维空间里“真正分层存在”，而不是被压扁成一张平面。

perspective

• 控制“观察者距离场景多远”。
• 只有设置在父级元素上时，子元素的 3D 变换才有深度效果。
• 就像你站在舞台前，看演员的远近缩放感。

它只渲染了一个“带透视的结果”，并没有创建一个真正的3D层级树。

transform-style: preserve-3d

默认情况下，transform-style 是 flat， 意思是：父元素的 3D 变换执行时，它的子元素会被压平成一张2D平面。

perspective 是视觉投影（从哪看、看多远）。

transform-style: preserve-3d 是层级关系保留（子元素能否在父级中保留深度）。

两者经常一起用，前者负责“透视”，后者负责“结构”。

验证

默认状态

加上之前：

加上之后：

旋转

如果只使用perspective，当父元素绕Y轴旋转收缩为一条线的时候，此时发现

他俩贴合成了一条直线。

现在为它添加3D效果：

子元素确实脱离了父元素，确实创建了3D图层效果！

背景渐变语法

线性渐变

语法：

background-image: linear-gradient(<方向或角度>, <颜色停止点1>, <颜色停止点2>, ...);

参数说明

• 方向：可以用关键字 to right / to left / to top / to bottom 或角度 45deg（从元素的上方向顺时针旋转到指定角度）。
  • to right 表示从左到右渐变（起点在左，终点在右）。
  • 0deg 指向上，90deg 指向右（不常直觉，记住 CSS 角度是从上方向顺时针计算）。
• 颜色停止点（color stop）：可以只写颜色，也可以写颜色后跟位置（如 #ff0 20% 或 rgba(255,0,0,0.5) 40px）。
  • 不指定位置时，浏览器会平均分配。
  • 指定相同位置会产生“硬边”（突变）。

例子

指定角度（45度对角线）：
.element {
  background-image: linear-gradient(45deg, #f06, #4a90e2);
}


硬边（两个颜色在同一点切换）：

.element {
  background-image: linear-gradient(to right, red 50%, blue 50%);
}


重复线性渐变：

.element {
  background-image: repeating-linear-gradient(90deg, #ccc 0 10px, #fff 10px 20px);
}

作为背景组合（带固色回退）：

.element {
  background: #eee; /* 回退色，供不支持渐变的老浏览器使用 */
  background-image: linear-gradient(to right, #f8b500, #ff3d7f);
}

硬边

background-image: repeating-linear-gradient(
[角度 | 方向], 
<颜色1> <位置1>, 
<颜色2> <位置2>, 
...
);

径向渐变

CSS 径向渐变（radial-gradient）

径向渐变是以一个点为圆心向外扩散的颜色过渡，适合表现光晕、聚光灯、同心圆效果。

基本语法

background-image: radial-gradient([形状 大小 at 位置], 颜色停止点...);

参数说明

• 形状（shape）：
  • circle（圆形，长宽比会强制等比）
  • ellipse（椭圆形，默认，随容器长宽变化）
• 大小（size keywords）：
  • closest-side ：渐变半径到离中心最近的一条边
  • farthest-side ：到离中心最远的一条边
  • closest-corner ：到最近的一个角
  • farthest-corner ：到最远的一个角（默认值）
• 位置（at position）：
  • 可以用关键字：center、top、left、right、bottom
  • 或者百分比 / 长度：at 30% 70%（x,y）
• 颜色停止点（color stops）：
  • 写法同 linear-gradient，可以加百分比或 px 指定过渡位置。

1. 基础圆形渐变
.element {
  background-image: radial-gradient(circle, #ff9a9e, #fad0c4);
}

2. 椭圆渐变（默认）
.element {
  background-image: radial-gradient(ellipse, #a18cd1, #fbc2eb);
}

3. 从左上角开始扩散
.element {
  background-image: radial-gradient(circle at top left, #ff7e5f, #feb47b);
}

4. 精确控制颜色停止点
.element {
  background-image: radial-gradient(circle, #00f 30%, #fff 30%, #fff 100%);
}


👉 会形成一个蓝色圆点 + 白色背景的硬边效果。

5. 使用大小关键字
.element {
  background-image: radial-gradient(circle closest-side, #43cea2, #185a9d);
}

6. 重复径向渐变（同心圆）
.element {
  background-image: repeating-radial-gradient(circle, #ff0 0 10px, #00f 10px 20px);
}

这里的 径向渐变 radial-gradient() 里的百分比 和线性渐变不一样，它描述的并不是“整体宽度/高度的一半”，而是 相对于渐变圆半径的百分比。

复制

background: radial-gradient(circle at left top, green 50%, transparent 50%);

---

为什么“看起来不是一半”？

关键点：

• 半径的 50% ≠ 容器宽/高的 50%
• 因为圆的半径是从圆心（左上角）到最远角落（右下角）的距离。
• 举个例子：如果容器是 100px × 100px，那么半径 = 左上角到右下角的距离 ≈ 141px。
• 那么 50% 半径 ≈ 70px。
• 所以绿色区域并不是占容器的一半，而是半径 70px 的圆。

换句话说：径向渐变的百分比是相对于渐变半径，而不是容器的宽度或高度。

圆锥渐变

圆锥渐变是以一个中心点为基准，按角度（而不是半径）来分布颜色，看起来就像饼图、雷达图、色轮的效果。

基本语法

background-image: conic-gradient([from 角度] [at 位置], 颜色停止点...);

参数说明

• from 角度：渐变起始角度（默认从 0deg，即正上方开始，顺时针方向）。
• at 位置：中心点位置，默认 at center。可以是关键字 (top left、bottom right)，也可以是百分比坐标 (at 30% 70%)。
• 颜色停止点：
  • 可以只写颜色（浏览器自动分配角度范围）。
  • 可以写具体的角度位置（如 red 0deg 120deg）。

1. 基础圆锥渐变
.element {
  background-image: conic-gradient(red, yellow, green, blue);
}


👉 从中心辐射，四种颜色依次顺时针过渡。

2. 指定起始角度
.element {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}


👉 渐变从右侧（90°方向）开始。

3. 指定位置
.element {
  background-image: conic-gradient(at top left, red, yellow, green);
}


👉 渐变中心在左上角。

4. 精确分段（类似饼图）
.element {
  background-image: conic-gradient(
    red 0deg 90deg,
    yellow 90deg 180deg,
    green 180deg 270deg,
    blue 270deg 360deg
  );
}


👉 每个颜色覆盖 90°，像四分饼图。

5. 透明圆锥渐变（光圈效果）
.element {
  background-image: conic-gradient(from 0deg at center, rgba(255,255,255,0.8), transparent 70%);
}

6. 重复圆锥渐变（分隔线 / 扇形图案）
.element {
  background-image: repeating-conic-gradient(
    red 0deg 20deg,
    yellow 20deg 40deg
  );
}


👉 不断重复 20°-40° 的色块，形成同心扇区图案。

复合渐变

复合渐变（Composite Gradients），在 CSS 里指的是把多种渐变效果叠加使用。因为 background-image 可以接受多个渐变，所以我们可以把 linear-gradient、radial-gradient、conic-gradient 混合起来，形成很复杂的背景。

基本写法

background-image: <gradient1>, <gradient2>, <gradient3>, ...;

后写的渐变会在 上层，前写的在 下层。如果需要透出下层，要用透明或部分透明的颜色。

.multiple-bg {
    background: 
        linear-gradient(45deg, rgba(255, 107, 107, 0.8), transparent),
        radial-gradient(circle at bottom right, rgba(78, 205, 196, 0.8), transparent),
        linear-gradient(to bottom, #667eea, #764ba2);
}

文字渐变色

-webkit-text-fill-color

-webkit-text-fill-color不是标准的 CSS 属性，它是 WebKit 内核（Chrome、Safari 等）支持的一个私有属性，不允许简写！

它用来 设置文字填充的颜色，可以看作是 color 的扩展，但只影响文字“内部的填充部分”，而不影响描边（stroke）。

是一个非标准的 CSS 属性（带有 -webkit- 前缀），主要用于设置文本的填充颜色。它和标准的 color 属性类似，但优先级更高，可以覆盖 color 的设置。

基础用法

.text {
  -webkit-text-fill-color: red;   /* 文字内部填充为红色 */
}

-webkit-text-stroke

-webkit-text-stroke 是 WebKit 内核（Chrome、Safari、Edge（Chromium）等）支持的 非标准 CSS 属性，用来给文字添加 描边。

它可以指定：

• 描边的宽度
• 描边的颜色

语法

-webkit-text-stroke: <width> <color>;

• <width>：描边宽度，例如 1px、2px。
• <color>：描边颜色，例如 black、#333。

也可以拆开写：

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;

-webkit-text-fill-color配合 -webkit-text-stroke 使用 可以分开设置文字的描边和填充颜色，实现特殊的文字效果：

.text-outline {
  -webkit-text-fill-color: white;       /* 填充白色 */
  -webkit-text-stroke: 2px black;       /* 黑色描边 */
}

background-clip

background-clip 用来指定背景绘制的范围，即背景（颜色或图片）延伸到元素的哪个区域。

标准取值

1、border-box（默认值）

• 背景会绘制到 边框区域以内（即包含 padding + content + border）。
• 注意：背景不会绘制到 border 外部，但会覆盖 border 下层。

2、padding-box

• 背景只绘制到 内边距区域以内（即 padding + content）。
• 边框区域不会被背景覆盖。

3、content-box

• 背景只绘制到 内容区域以内（仅 content）。
• padding 和 border 区域不会被背景覆盖。

其他值

4、text（非标准，需结合 -webkit- 前缀，部分浏览器支持）

• 背景被裁剪到 文字的形状 内部。
• 常用于“文字镂空背景”的效果。

.text-bg {
  background: url(bg.jpg) no-repeat center/cover;
  -webkit-background-clip: text;
  color: transparent;
}

应用场景

最简单的渐变文字

文字颜色透明+背景渐变色+背景裁剪

<style>
.main{
    font-size: 20px;
    color: transparent;
    background: linear-gradient(to right, red, blue);
    background-clip: text;
}
</style>
<span class="main">文字</span>

transform变换

transform 用来对元素进行 二维 / 三维变形，支持多种函数，可以叠加使用（用空格隔开）。

平移 → translate

缩放 → scale

旋转 → rotate

斜切 → skew

矩阵 → matrix / matrix3d（底层，不常手写）

3D 版本 → translate3d / scale3d / rotate3d / perspective（设置透视深度，让 3D 变换更有立体感。）

scaleX(n) / scaleY(n) 单方向缩放。

rotate(angle) 旋转，单位 deg（角度），默认绕 Z 轴（2D 下就是平面旋转）。

• rotateX可以实现上下颠倒
• rotateY可以实现左右颠倒
• rotateZ可以实现在平面上旋转

scaleX(n) / scaleY(n)如果值为-1可以分别实现左右颠倒，上下颠倒

nth-of-type/child

nth-of-type

nth-of-type是根据tag来分类的，也就是第几个相同元素

.group:nth-of-type(3)是选中当前元素的父元素的第三个同等类型的元素，且该元素有group类

这很奇怪？看一个例子

<style>
    .group:nth-of-type(3){
        color: pink;
    }
</style>

<body>
    <div class="group">A</div>
    <div>B</div>
    <span class="group">C</span>
    <span class="group">C</span>
    <span class="group">C</span>
    <div class="group">
        <span>D</span>
        <span>D</span>
        <span>D</span>
        <span>D</span>
    </div>
    <div class="group">D</div>
    <div class="group">D</div>
</body>

展示效果：

这个里面父元素是body，里面选中了第三个span以及第三个div，并且他们都有类为group

如果第三个没有？

<span class="group">C</span>
<span class="group">C</span>
<span>C</span>
<span class="group">C</span>

这样的话，就没有任何元素受影响，因为他选的就是第三个，.group相当于第二个条件

疑惑的，来看看下面这种：

.group :nth-of-type(3){
    color: pink;
}

分析一下，现在.group不是第三个的约束条件了,而且这里使用的是后代选择器约束，也就是说:nth-of-type(3)现在是对.group的后代进行约束，第三个相同的后代进行选择

对于下面的形式：

<div class="group">
    <span>D</span>
    <span>D</span>
    <span>D</span>
    <span>D</span>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</div>

也就是会选中第三个span元素以及第三个div元素

nth-child

与nth-of-type类似，不过nth-of-child选择的就是第几个元素，与tag无关，不管有多少个多少种都只会选中一个

验证一下上述特性：

.group:nth-child(2)验证

<style>
    .group:nth-child(2) {
        color: red
    }
</style>

<body>
    <div class="group">A</div>
    <div class="group">B</div>	<!--这个符合条件会变色-->
    <div class="group">C</div>	
    <span class="group">A</span>
    <span class="group">B</span>
    <span class="group">C</span>
</body>

<body>
    <div class="group">A</div>
    <div>B</div>				<!--没有符合条件的元素，都不会变色-->
    <div class="group">C</div>	
    <span class="group">A</span>
    <span class="group">B</span>
    <span class="group">C</span>
</body>

.group :nth-child(2)验证

<style>
    .group :nth-child(2) {
        color: red
    }
</style>
<div class="group">
    <div>
        <span>1.1</span>
        <!-- 符合第二个后代元素，变色 -->
        <span>1.2</span>    
        <span>1.3</span>
    </div>
    <!-- 符合第二个后代元素，变色 -->
    <div>Second Child</div>
    <div>Third Child</div>
</div>

border-image

默认的边框是通过 border: 1px solid red; 这样的语法设置颜色和线条。 而 border-image 可以把图片切割并应用到边框上，形成更灵活的装饰效果。

语法

border-image: url(border.png) slice fill repeat;

它其实是一个简写属性，包含以下子属性：

工作原理（9 宫格切图）

1. 先准备一张图片，比如 border.png。
2. 用 border-image-slice 把它切成 9 块（四个角、四条边、中间一块）。
   • 四个角 → 固定放在四个角
   • 四条边 → 根据 border-image-repeat 拉伸或平铺
   • 中间区域 → 默认不显示（除非指定 fill）

示例

1. 最简单的边框图片

.box {
  border: 20px solid transparent; /* 必须有 border 才能显示图片 */
  border-image: url(border.png) 30 stretch;
}

• 30 = 切割 30px 的边。
• 四角用图片的角，四边拉伸。

2. 平铺效果

.box {
  border: 15px solid transparent;
  border-image: url(pattern.png) 15 repeat;
}

• 图片边缘会像瓷砖一样平铺，形成花纹边框。

3. 使用渐变作为边框

.box {
  border: 10px solid;
  border-image: linear-gradient(to right, red, blue) 1;
}

• 渐变也可以直接作为 border-image-source，很适合炫彩边框效果。

注意事项

• 必须先有 border-width 才能显示 border-image。
• border-style 不能是 none，要写 solid 或其他（即使图片覆盖掉）。
• 图片四角不会被拉伸，能保证边框造型完整。

✅ 总结： border-image 就是 用图片（或渐变）做边框，通过切片 + 平铺/拉伸的方式实现，比单一颜色更灵活，常用于装饰性很强的 UI。

居中

概述

margin居中

margin: 0 auto; 并不是万能的“水平居中”方案，它有一些前提条件。

✅ 能居中的情况

margin: 0 auto; 的原理是：

• 在 块级元素 (block-level element) 上设置 固定宽度 (width)；
• 元素左右外边距 (margin-left 和 margin-right) 被设为 auto；
• 浏览器会把剩余的可用空间平均分配给左右外边距。

.box {
  width: 400px;   /* 固定宽度 */
  margin: 0 auto; /* 水平外边距自动分配 */
}

此时 .box 在父容器中会水平居中。

因为他们的display为block都会独占一行，margin: 0 auto;只是决定这一行的宽度分配方式

text-align居中

text-align: center; 很多人第一反应就是“居中”，但它并不是万能的，它只在特定场景下生效。总结一下：

可以用 text-align: center; 的场景

1. 文本居中 对块级元素里的行内内容（inline、inline-block、inline-flex、img 等）生效：

   复制

   <div style="text-align: center;">
     <span>文字</span>
     <img src="xx.png">
   </div>

   → 文字、图片都会居中。

2. 按钮文字居中 按钮是块状容器，里面的文字属于行内元素：

   复制

   button { text-align: center; }

3. 表格单元格内容居中 直接对 td 或 th 使用：

   复制

   td { text-align: center; }

line-height

适合单行文字。

.box {
  height: 100px;
  line-height: 100px; /* 垂直居中 */
  text-align: center; /* 水平居中可顺带 */
}

table-cell

设置display为table-cell行为上类似div，独占一行，默认宽度是随内容（像span）

设置 vertical-align的取值有baseline | top | middle | bottom( top和baseline行为差不多啊 )

table-cell 水平居中依赖 text-align

position

vertical-align

vertical-align 可以实现垂直居中，但它对你的布局环境要求非常刻薄。

很多初学者觉得它没用，是因为把它当作了类似 Flexbox 的 align-items 来用，直接写在父容器上，结果发现毫无反应。

1. 它的“势力范围”：只对两种元素有效

vertical-align 不是给块级元素（div, section, p）准备的。它只作用于：

内联元素 (Inline-level)： <span>, <a>, <img>, 强制设为 inline-block 的元素。 表格单元格 (Table-cell)： <td>, <th> 或 display: table-cell 的元素。

2. 场景一：在表格中（最省心的垂直居中）

这是唯一一个 vertical-align 表现得像“正常人”的场景。在 td 或 display: table-cell 的元素上设置，它会直接处理容器内的所有内容。

.box {
  display: table-cell;
  height: 200px;
  vertical-align: middle; /* 这里的 middle 会让内容完美居中 */
  border: 1px solid #ccc;
}

3. 场景二：在行内元素中（最头疼的场景）

在 span 或 img 上使用时，它不是相对于父容器居中，而是相对于**“行高（Line-box）”**居中。

常见的挫败感：

如果你只有一个 span 在 div 里，写 vertical-align: middle 是没用的。它需要一个“参照物”或者足够的行高。

如何利用它实现垂直居中？

一种经典的老派技巧是给父元素设置一个巨大的 line-height，或者添加一个高度 100% 的“幽灵节点”作为参照物：

<div class="container">
  <span class="ghost"></span> <img src="logo.png" alt="居中的图片">
  <span class="text">文字也能居中了</span>
</div>

<style>
.container { height: 200px; }
.ghost {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
img, .text {
  vertical-align: middle; /* 它们现在相对于 ghost 居中 */
}
</style>

4. vertical-align 还有什么别的用处？

除了居中，它在日常开发中解决最多的其实是**“奇怪的间隙”**：

• 消除图片下方的空白： 图片默认是 vertical-align: baseline（基线对齐），这会导致图片下方留出一点给“字母尾巴”（如 g, j, p）准备的空隙。 解决办法： 给图片设置 vertical-align: middle 或 bottom，那条缝隙就消失了。
• 对齐图标与文字： 当你在文字旁边放一个 Icon 或是 Input 框时，它们经常对不齐。通过设置 vertical-align: -2px 这种精确的数值，可以手动微调对齐位置。

总结：还要用它吗？

如果你在处理表格布局： 用它，它是唯一的王者。 如果你在微调图标和文字的对齐： 用它，非常灵活。 如果你是想让一个 div 里的内容垂直居中： 别用它！ 请直接拥抱 Flexbox 或 Grid。

/* 现代方案：两行搞定一切垂直居中 */
.parent {
  display: flex;
  align-items: center; 
}