偶数宽度父容器中奇数宽度子元素的居中对齐实现

当然可以实现精确居中，不管父容器宽度是偶数还是奇数，子元素宽度是奇数还是偶数，都能通过CSS做到真正的几何居中。下面是几种常用的实现方案：

1. Flexbox布局（推荐，现代浏览器首选） #

Flexbox是目前最简洁可靠的居中方案，自动处理所有尺寸组合的对齐逻辑：

.parent {
  width: 10px; /* 偶数宽度父容器 */
  height: 20px; /* 可选，若需垂直居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（可选） */
  background-color: #eee;
}

.child {
  width: 1px; /* 奇数宽度子元素 */
  height: 10px; /* 可选 */
  background-color: #f00;
}

原理：Flexbox会基于父容器和子元素的实际尺寸计算偏移，10px父容器减去1px子元素后，左右各分配4.5px的空间。现代浏览器支持亚像素渲染，视觉上完全看不出偏移，子元素的几何中心与父容器完全重合。

2. 绝对定位 + 负margin #

这是传统的居中方案，适合需要兼容旧版浏览器的场景：

.parent {
  width: 10px;
  height: 20px;
  position: relative;
  background-color: #eee;
}

.child {
  width: 1px;
  height: 10px;
  position: absolute;
  left: 50%; /* 子元素左边缘对齐父容器中线 */
  margin-left: -0.5px; /* 向左偏移自身宽度的一半，让中线重合 */
  background-color: #f00;
}

原理：通过left: 50%定位到父容器中线位置，再用负margin拉回子元素宽度的一半，实现精确居中。即使是0.5px的偏移，浏览器也能正确渲染。

3. Grid布局 #

Grid布局的居中逻辑和Flexbox类似，语法同样简洁：

.parent {
  width: 10px;
  height: 20px;
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中 */
  background-color: #eee;
}

.child {
  width: 1px;
  height: 10px;
  background-color: #f00;
}

原理：Grid的place-items: center会自动将子元素对齐到网格区域的中心，同样支持亚像素级的精确对齐。

补充说明 #

不用担心半像素偏移的视觉问题——现代主流浏览器（Chrome、Firefox、Safari、Edge等）都具备成熟的亚像素渲染能力，这种微小偏移会被平滑处理，肉眼完全无法察觉，且从布局逻辑上，子元素确实处于父容器的正中间。

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