如何将切换按钮置于div元素中心？及位置调整问题解决

你的核心需求是让开关按钮与Client_name元素水平+垂直双居中，当前用display: table-cell的方式没生效，大概率是父容器布局没配合好，或是开关本身的inline-block特性导致对齐偏差。下面给几个直接可行的方案：

方案1：用Flexbox快速实现（推荐） #

Flexbox是现代布局中最省心的居中方案，给容纳Client_name和开关的父容器加几个属性就能一键实现对齐：

1. 给父容器添加CSS（假设父容器是包裹Client_name和开关的外层容器）：

.parent-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 可选：给文字和开关之间加间距 */
  height: 50px; /* 匹配你的button10高度，保证垂直居中基准 */
}

2. 不需要额外的div-permission，直接把Client_name文本和.switch放在这个父容器里即可，同时可以去掉.switch的position: relative（非必须，但能简化代码）。

方案2：修复现有table-cell布局 #

如果想保留table-cell的实现方式，必须确保父容器设置为display: table，否则table-cell不会生效：

1. 给div-permission的父容器添加：

.div-permission-wrapper {
  display: table;
  width: 100%; /* 或设置固定宽度 */
  height: 50px;
}

2. 调整div-permission的CSS，让它正确承载内容：

.div-permission {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 新增：让内容水平居中 */
  height: 45px;
  width: 900px;
  border: 1px solid red;
}

3. 把Client_name和.switch都放进div-permission里，table-cell的垂直+水平居中就会作用于它们。

方案3：用绝对定位精准控制（适合自定义偏移场景） #

如果需要开关相对于Client_name做微调（比如下移+右移），可以用绝对定位：

1. 给Client_name的容器设置相对定位：

.client-name-container {
  position: relative;
  height: 50px;
  line-height: 50px; /* 让文本自身垂直居中 */
}

2. 调整.switch的CSS：

.switch {
  position: absolute;
  top: 50%; /* 垂直居中基准线 */
  left: calc(100% + 10px); /* 放在文本右侧10px处 */
  transform: translateY(-50%); /* 修正垂直居中的偏移 */
  /* 若要额外下移，比如再下移5px，改成transform: translateY(calc(-50% + 5px)); */
  width: 73px;
  height: 32px;
}

额外提示：修正开关滑块的偏移bug #

你代码里input:checked + .slider:before的-webkit-transform: translateX(86px)数值过大，会导致滑块超出开关容器，建议统一改成38px（和其他transform值保持一致），避免视觉异常。

内容的提问来源于stack exchange，提问作者Pierre Chevin