如何在响应式col-sm-6网格中实现按钮与文本的居中对齐？

嘿，我太懂你这种卡壳的感觉了——用Bootstrap的col-sm-6搭两栏布局，想让文本和按钮同时垂直水平居中，试了line-height只对文本有用，用margin-top凑活总觉得不正规，还搞不定移动端的适配。别愁，给你几个标准合规的方案，都是能完美解决问题的：

Bootstrap本身就自带了一套flex布局的工具类，完全不用自己写额外CSS，直接给容器加类就能实现完美居中：

<div class="row align-items-center">
  <!-- 文本列：内部也用flex实现元素居中 -->
  <div class="col-sm-6 d-flex align-items-center justify-content-center">
    <p>这里是需要居中显示的文本内容</p>
  </div>
  <!-- 按钮列：同样用flex布局 -->
  <div class="col-sm-6 d-flex align-items-center justify-content-center">
    <button class="btn btn-primary">点击操作</button>
  </div>
</div>

• row align-items-center：让整行的所有列都垂直居中对齐
• d-flex align-items-center justify-content-center：给每个列内部开启flex布局，让里面的元素（文本/按钮）同时实现垂直+水平居中
• 移动端适配：当屏幕尺寸小于sm断点时，col-sm-6会自动切换为100%宽度，每个元素独占一行，依然保持居中，完美解决移动端错位问题

如果你不想依赖Bootstrap的工具类，自己写CSS也很简单，用标准的Flex布局就搞定：

/* 给父行设置flex布局，让列垂直居中 */
.center-row {
  display: flex;
  align-items: center;
  /* 如果你的行没有默认高度，可以加min-height让垂直居中生效，比如min-height: 80px; */
}

/* 给每个列设置内部flex，让元素居中 */
.center-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* 让列占满父行的高度 */
}

对应的HTML结构：

<div class="row center-row">
  <div class="col-sm-6 center-col">
    <p>居中文本</p>
  </div>
  <div class="col-sm-6 center-col">
    <button class="btn btn-primary">操作按钮</button>
  </div>
</div>

• line-height：只对单行文本的垂直居中有效，一旦文本换行就会出现排版混乱；而且按钮是行内块元素，line-height对它的垂直居中逻辑和文本完全不同，所以根本起不到作用
• margin-top：属于“硬偏移”的做法，完全依赖固定的数值，一旦屏幕尺寸变化、元素高度改变，就会立刻错位，完全不符合响应式设计的原则，这也是你移动端测试出问题的核心原因

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