如何使用center类动态实现子div居中？支持CSS及Tailwind两种方案

直接新增.center类的样式规则即可，无需修改现有其他代码：

.center {
  position: relative;
  /* 把子元素顶部对齐父容器垂直中点 */
  top: 50%;
  /* 把子元素往上挪自身高度的一半，实现整体居中 */
  transform: translateY(-50%);
  /* 可选：如果不需要下方兄弟元素跟随位移，添加这行抵消相对定位带来的高度占用 */
  margin-bottom: -100px;
}

如果子元素高度后续会调整，可提前定义高度变量实现动态适配：

:root {
  --child-height: 100px;
}
.child {
  height: var(--child-height);
}
.center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: calc(-1 * var(--child-height));
}

方案1：直接使用内置工具类 #

给需要居中的子元素直接添加对应的工具类即可，无需额外配置：

<div class="child green relative top-1/2 -translate-y-1/2 mb-[-100px]"></div>

方案2：扩展自定义工具类 #

如果需要多处复用center类，可以在Tailwind配置文件中扩展自定义规则：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.center': {
          position: 'relative',
          top: '50%',
          transform: 'translateY(-50%)',
          marginBottom: '-100px',
        }
      })
    })
  ],
}

配置完成后就可以直接在元素上添加center类使用：

<div class="child green center"></div>

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