自学CSS：如何独立将.neck元素居中对齐到.head元素下方？

核心问题分析 #

你的.android容器默认使用flex row布局，导致.head和.neck元素并排显示而非垂直堆叠。之前尝试margin-right移动.neck时，由于两者同属一个flex行容器，整个flex项目组的位置会被影响；而错误的flex column布局应用位置也导致未达到预期效果。

修正方案 #

将.android容器改为flex column布局，并设置align-items: center实现水平居中，同时保留.neck的margin-top来控制与.head的间距：

.android {
  display: flex;
  flex-direction: column; /* 改为垂直堆叠子元素 */
  align-items: center;    /* 水平居中所有子元素 */
}

.head {
  width: 15%;
  height: 60px;
  background: rgb(62, 226, 62);
  border-radius: 50% / 10%;
}

.neck {
  width: 50px;
  height: 70px;
  border-radius: 50px 50px / 20px 20px;
  background: rgb(39, 189, 47);
  margin-top: 75px; /* 保留与.head的间距 */
}

方案说明 #

• flex-direction: column让.android的子元素（.head和.neck）垂直排列，从根本上解决并排问题。
• align-items: center确保每个子元素在水平方向上居中对齐，这样.neck自然会处于.head的正下方。
• 无需额外调整margin-left/right，flex布局会自动处理居中逻辑，避免手动计算偏移量的误差。

备选方案（不修改父容器方向） #

如果需要保持.android的row布局，可以给.head和.neck包裹一个额外的容器，让这个内部容器使用flex column：

<div class="android">
  <div class="head-neck-container">
    <div class="head"></div>
    <div class="neck"></div>
  </div>
</div>

.android {
  display: flex;
  justify-content: center; /* 居中内部容器 */
}

.head-neck-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .head和.neck的CSS保持不变 */

内容的提问来源于stack exchange，提问作者Pythaes From the Onion patch