CSS align-items:center 首个侧边栏子元素不居中问题求解

在纵向布局（flex-direction: column）的flex容器上设置align-items: center，仅会让容器的**直接子元素（即.sidebarItem）**在水平方向居中，不会控制子元素内部的内容对齐。
出现第一个模块偏移、其余模块看似正常的核心原因：

• 你没有为.sidebarItem设置统一宽度规则：块级元素<p>默认会占满父元素的全部可用宽度，第一个模块里的长段落会把当前.sidebarItem撑到和外层.sidebar几乎等宽；另外两个模块的分类列表、社交图标本身内容宽度小，不会撑满父容器，视觉上就显得是居中的。
• 你没有设置.sidebarItem的内部对齐规则：第一个模块内的图片、段落默认是左对齐状态，就算外层.sidebarItem本身被居中，内部内容靠左排列，视觉上就会呈现出整个模块没对齐的效果。

在原有CSS代码中追加.sidebarItem的统一样式，约束模块宽度、设置内部内容居中即可：

.sidebarItem {
  /* 统一所有侧边栏模块宽度，和你预设的图片宽度保持一致 */
  width: 300px;
  /* 让模块内部所有元素水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 增加内边距避免内容贴边，内边距会被算入300px宽度内不会撑大容器 */
  padding: 0 15px;
  box-sizing: border-box;
}

/* 可选优化：让段落文本居中，视觉风格更统一 */
.sidebarItem p {
  text-align: center;
}

追加上述样式后，三个侧边栏模块就会保持统一的居中对齐效果。

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