如何复用重复的Bootstrap CSS代码？实现容器样式继承

当然可以实现类的复用，核心思路是把通用的居中样式抽离成基础自定义类，再让垂直居中类继承基础类并添加额外的flex-column对应样式。下面分两种常用场景给出方案：

1. 使用Sass（推荐，适配Bootstrap原生预处理器） #

因为Bootstrap本身基于Sass开发，用Sass的@extend可以直接继承Bootstrap的内置类，避免手动重复写CSS属性：

// 定义基础居中容器类，复用Bootstrap的通用flex居中样式
.my-centered-container {
  @extend .d-flex;
  @extend .align-items-center;
  @extend .justify-content-center;
  @extend .h-100;
}

// 垂直居中容器，继承基础类并添加列方向布局
.my-centered-container-vertical {
  @extend .my-centered-container;
  @extend .flex-column;
}

之后在HTML中直接使用自定义类即可：

<!-- 水平居中容器 -->
<div class="my-centered-container">
  你的内容
</div>

<!-- 垂直+水平居中容器（列方向） -->
<div class="my-centered-container-vertical">
  你的内容
</div>

2. 原生CSS方案（无需预处理器） #

如果不用预处理器，直接把通用样式写在基础类里，垂直类只需补充flex-direction: column：

.my-centered-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.my-centered-container-vertical {
  /* 继承基础类的所有样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* 添加垂直布局的额外样式 */
  flex-direction: column;
}

或者更灵活的方式，直接在HTML中叠加类（无需额外写垂直类）：

.my-centered-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

<!-- 水平居中 -->
<div class="my-centered-container">
  你的内容
</div>

<!-- 垂直居中 -->
<div class="my-centered-container flex-column">
  你的内容
</div>

这种方式同样能避免重复写大量Bootstrap类，同时保持代码简洁。

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