如何让两个p标签在div容器内实现垂直居中？

没问题，我来帮你搞定这个垂直居中的需求！先看你的HTML结构，.toggle-area里有个<p>SEARCH BY</p>标题，还有.switch-inner容器装着两个文本段落和一个切换按钮，我们要让这些内容都实现漂亮的垂直居中效果，给你两种实用的方案，优先推荐第一种哦～

方案1：Flexbox布局（现代浏览器首选） #

Flexbox是目前实现垂直居中最灵活、最省心的方式，不管内容是单行还是多行，都能完美适配。直接给父容器添加几个属性就行：

/* 让.switch-inner里的横向元素（文本+按钮）垂直居中对齐 */
.switch-inner {
  display: flex;
  align-items: center; /* 核心属性：垂直方向居中 */
  gap: 1rem; /* 可选：给元素之间加间距，视觉更舒适 */
}

/* 如果需要.toggle-area整体内容在容器内垂直居中（比如给这个区域设置了固定高度） */
.toggle-area {
  display: flex;
  flex-direction: column; /* 让内部元素垂直排列 */
  justify-content: center; /* 垂直方向居中 */
  min-height: 100px; /* 示例高度，根据你的实际需求调整 */
  gap: 0.5rem; /* 标题和切换区之间的间距 */
}

/* 去掉p标签默认的margin，避免不必要的间距干扰 */
.toggle-inline {
  margin: 0;
}

/* 保留你的开关样式（如果已有可以不用改） */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

方案说明： #

• *align-items: center* 会让.switch-inner里的所有子元素在垂直方向上居中对齐，完美解决按钮和文本不对齐的问题；
• 给.toggle-area设置*flex-direction: column*和*justify-content: center*，能让整个区域的内容在你设置的高度内垂直居中（记得给.toggle-area设置高度，否则它会自适应内容高度，看不出居中效果）；
• *gap*属性是Flexbox自带的间距控制，比用margin更简洁，不用考虑外边距折叠的问题。

方案2：Line-height 适配单行文本场景 #

如果你的文本都是单行，且开关的高度固定（比如34px），可以用line-height的方式实现，代码更简单：

/* 让.switch-inner的行高和开关高度一致，单行文本自动垂直居中 */
.switch-inner {
  line-height: 34px;
}

/* 确保文本和按钮都是inline-block元素，配合vertical-align对齐 */
.toggle-inline {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.toggle-btn.toggle-inline {
  display: inline-block;
  vertical-align: middle;
}

/* 开关样式保持不变 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* 其余开关样式省略，和方案1一致 */

方案说明： #

这个方法的核心是让容器的line-height等于内部最高元素（开关）的高度，单行文本会自动垂直居中，再给inline-block元素加上*vertical-align: middle*，确保按钮也能对齐。但如果文本换行，这个方法就会失效，所以只适合单行文本的场景。

总结 #

优先选择Flexbox方案，它兼容性好（支持IE11及以上所有现代浏览器），而且不管内容是单行还是多行，都能轻松实现垂直居中，代码也更易维护。

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