<div class="parent">
    <div class="son">
    </div>
</div>
.parent {
    width: 400px;
    height: 400px;
}
.son {
    width: 200px;
    height: 200px;
}

1.水平垂直居中

1. flex（弹性布局）

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

2. 绝对定位 + margin：auto

.parent {
    position:relative;
}
.son {
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

3. 绝对定位 + 负 margin

.parent {
    position:relative;
}
.son {
    position:absolute;
    left:50%;
    top: 50%;
    margin-left: -100px; （子元素一半）
    margin-top: -100px; （子元素一半）
}

4. 绝对定位 + transform

.parent {
    position:relative;
}
.son {
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

5. grid（网格布局）

.parent {
    display: grid;
    place-items: center;
}

6. table-cell（表格布局） + margin

缺点：导致父元素的文本也是居中显示的;

.parent {
    display: table-cell; vertical-align: middle;
}
.son {
    margin: 0 auto;
}

2. 水平居中

行内元素、行内块元素、文本

text-align: center;

块级元素

margin:0 auto;

任意元素

定位/flex

3.垂直居中

行内元素、行内块元素、文本

height: 20px; line-height: 20px;

块级元素

display: table-cell; vertical-align: middle;

任意元素

定位/flex

4.适配方案

1. postcss-px-to-viewport

postcss-px-to-viewport 是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局，以提高页面的响应性和可用性。

postcss-px-to-viewport文档

npm install postcss-px-to-viewport --save-dev
在项目根目录下创建 .postcssrc.js 文件，配置 postcss-px-viewport 插件

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',  // 需要转换的单位，默认为"px"
      viewportWidth: 1980, //  设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 能转化为vw的属性列表
      viewportUnit: 'vw', //  希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的CSS选择器 
      minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, // 是否直接更换属性值，而不添加备用属性
      exclude: [], // 忽略某些文件夹下的文件或特定文件
      include: undefined,  // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw' // 横屏时使用的单位
      landscapeWidth: 1980 // 横屏时使用的视口宽度
    }
  }
}

propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如 propList: [“*”,“!letter-spacing”],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing。

selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: [‘wrap’],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换。

vant兼容

如果使用了vant组件库，vant的设计稿是根据375px去设计的，为了避免冲突需要单独设置下，

const path = require("path");
module.exports = ({ file }) => {
  const designWidth = file.includes(path.join("node_modules", "vant"))
    ? 375
    : 750;
  return {
    plugins: {
      "postcss-px-to-viewport": {
        viewportWidth: designWidth,
      },
    },
  };
};

缺点：

不适用于字体大小：由于 vw 和 vh 单位不适用于字体大小，因此需要单独设置字体大小的转换方式。
兼容性问题：一些老版本的浏览器不支持 vw 和 vh 单位，需要使用兼容性处理或回退方案。
无法把行内样式中的 px 转换成视口单位（vw, vh, vmin, vmax）
无法精确控制样式：由于浏览器的视口宽度和高度不同，转换后的样式可能会有一定的误差，无法精确控制样式。

思考题：如果想要pc端不生效移动端生效如何实现？

写两套样式，pc端使用媒体查询，mediaQuery设置false。

vue3+vite配置

5.2024 年增加了垂直居中功能

在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。

<div style="align-content: center; height: 100px;">
  <code>align-content</code> 就是这么简单！
</div>