自定义开关按钮居中核心难点是结构脱离文档流、尺寸不可控且原生input常被隐藏；text-align无效因滑块多为绝对定位，应改用display: flex+align-items:center+justify-content:center，并确保容器有明确高度。
自定义开关按钮（<label></label> + <input type="checkbox"> + <span></span> 等组合）内部元素居中，核心难点不是“怎么写 CSS”，而是**开关结构天然脱离文档流、尺寸不可控、且常被隐藏原生 input**。直接套用普通按钮居中方案大概率失效。
为什么 text-align: center 在开关里经常不起作用
很多人给开关外层 <label></label> 加 text-align: center，结果文字或滑块没居中。原因很实在：
-
<input type="checkbox">默认是 inline 元素，但被display: none或opacity: 0隐藏后，它不参与布局，也不响应text-align - 真正起视觉作用的
<span></span>或伪元素（如::before/::after）往往设了position: absolute，脱离文档流，text-align对它完全无效 - 如果开关容器用了
display: flex，text-align本身就被忽略，不管写在哪都没用
display: flex 是最稳的内部居中方案
别试图在父容器上靠 text-align 或 margin: auto 拽动绝对定位的滑块——直接让开关容器自己变成 Flex 容器，把滑块和文字都作为 Flex 项目来对齐。
- 给开关的**最外层容器**（通常是
<label></label>或包裹用的<div>）加 <code>display: flex、align-items: center（垂直居中）和justify-content: center（水平居中） - 确保该容器有明确高度（比如
height: 24px），否则align-items: center没参照基准 - 内部滑块（
<span class="slider"></span>）不用设position: absolute，改用flex布局控制位置；若必须用伪元素，就把它加在<span></span>上，并让<span></span>自身是 Flex 容器 - 文字标签（
<span class="label"></span>）也作为同级 Flex 项目，用margin-left或gap控制间距，而不是靠float或position - 滑块元素必须设
position: absolute - 它的**直接父容器**（不是最外层 label，而是那个带
position: relative的 wrapper）必须有position: relative - 滑块自身要同时写：
top: 50%、left: 50%、transform: translate(-50%, -50%) - 漏掉任意一个，滑块就会偏移：只写
top: 50%不写transform，它会以左上角为基准下移一半高度；只写transform不写top/left，它根本不动 -
line-height只对单行文本有效，多行时行高叠加，整体位置飘忽 - SVG 图标默认
vertical-align: baseline，和文字基线对齐，不是中线 - 解决方案只有一个：把文字和图标一起包进一个
<span></span>，给这个<span></span>设display: flex+align-items: center+gap: 4px，图标用height: 1em保持比例 - 避免在开关整体上用
display: table-cell——<label></label>是替换元素，IE/旧浏览器可能拒绝渲染
绝对定位滑块时，transform: translate(-50%, -50%) 必须配 top: 50% + left: 50%
很多自定义开关用伪元素模拟滑块，并设 position: absolute。这时居中不是靠父容器样式，而是靠三要素缺一不可：
多行文字或图标混排时，line-height 会失效，必须用 flex
开关右侧如果放两行说明文字（比如“开启”+“节能模式”），或者带 SVG 图标 + 文字，line-height 无法可靠垂直居中。原因很简单：
真正容易被忽略的，是开关结构里哪一层该设 position: relative、哪一层该设 display: flex。层级错一级，所有居中规则都会静默失效，而且很难 debug —— 因为浏览器开发者工具里看不出“本该居中却没动”的原因，只看到最终渲染位置。
