CSS Flexbox中子元素能否自主控制对齐方式？父元素不可修改时如何定位

失效原因说明 #

你当前给body设置的是flex-direction: column的Flex布局，Flex布局的规则为：交叉轴（此处对应水平方向）支持子元素通过align-self单独控制对齐，主轴（此处对应垂直方向）的对齐由父容器的justify-content统一控制，子元素的justify-self属性在Flex主轴上不生效，因此你原来的垂直方向配置无法生效。

方案1：不修改父元素（body）的实现方式 #

以下方案仅修改.child样式即可满足定位需求：

• 方案1.1：利用Flex项目的auto margin特性
  仅调整margin属性即可同时实现水平+垂直居中，是成本最低的方案：

  .child {
    /* 原有样式保留 */
    margin: auto; /* 上下左右剩余空间自动平分，实现双向居中 */
    /* 如果需要保留左右2px边距，写成 margin: auto 2px; 即可 */
  }
  

  如果需要垂直方向拉伸占满父容器剩余高度，保留原有margin:2px的同时新增flex-grow: 1;即可。
• 方案1.2：使用绝对定位
  由于当前html和body都为100%宽高，绝对定位相对于视口的边界和body完全一致，可灵活控制对齐：

  .child {
    /* 原有样式保留 */
    position: absolute;
    /* 双向居中配置 */
    inset: 0; /* 等价于top/right/bottom/left都为0 */
    margin: auto;
    /* 如需拉伸占满父容器，删除margin:auto，保留inset:0即可 */
  }
  

• 方案1.3：相对定位+偏移计算

  .child {
    /* 原有样式保留 */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  

方案2：可修改父元素（body）的最优配置 #

如果允许调整body样式，有两种更易维护的方案：

• 保留Flex布局：给body新增justify-content: center;，即可让所有子元素默认垂直居中，子元素的水平对齐仍可用align-self单独控制。如果需要子元素垂直拉伸，给子元素加flex-grow: 1;即可。
• 切换为Grid布局：修改body的display为grid，仅需要少量配置即可支持子元素的双向对齐独立控制：

  body {
    display: grid;
    /* 全局子元素默认居中：place-content: center; */
    /* 全局子元素默认拉伸：place-items: stretch; */
  }
  

  切换为Grid布局后，你原来写的align-self、justify-self属性都会正常生效，可单独控制每个子元素的对齐方式，灵活度更高。

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