如何在不破坏CSS Slider开关的情况下对齐它们

<div class="slider-container">
  <input type="checkbox" id="slider1">
  <label for="slider1"></label>
</div>
<div class="slider-container">
  <input type="checkbox" id="slider2">
  <label for="slider2"></label>
</div>

.slider-container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

<div class="slider-container">
  <input type="checkbox" id="slider1">
  <label for="slider1"></label>
</div>
<div class="slider-container">
  <input type="checkbox" id="slider2">
  <label for="slider2"></label>
</div>

.slider-container {
  display: grid;
  justify-items: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

<div class="slider-wrapper">
  <input type="checkbox" id="slider1">
  <label for="slider1"></label>
</div>
<div class="slider-wrapper">
  <input type="checkbox" id="slider2">
  <label for="slider2"></label>
</div>

.slider-wrapper {
  position: relative;
}

.slider-wrapper input[type="checkbox"] {
  position: absolute;
  /* 根据需要进行微调 */
}

.slider-wrapper label {
  /* 根据需要进行微调 */
}