Flex项目居中实现方法及ABCD居左DATE居中布局方案咨询

针对你给出的代码，要让ABCD保持左对齐，同时DATE相对于整个容器居中，最直接的方法是用绝对定位（因为Flex默认是主轴排列，直接用Flex属性很难让单个项目脱离流居中）。具体修改如下：

修改后的完整代码 #

.flex-items {
  display: flex;
  justify-content: flex-start;
  padding-left: 17px;
  position: relative; /* 给容器设相对定位，作为绝对定位的参考 */
}

.abcd1 {}

.date1 {
  position: absolute;
  left: 50%; /* 让元素左边缘对齐容器中点 */
  transform: translateX(-50%); /* 元素自身左移50%宽度，实现完美居中 */
}

<div class="flex-items">
  <div class="abcd1">ABCD</div>
  <div class="date1">DATE</div>
</div>

原理说明 #

• 给.flex-items加position: relative后，内部的绝对定位元素会以这个容器为参考系，而不是整个页面。
• left: 50%是让DATE的左边缘对齐容器的水平中点，再用transform: translateX(-50%)把元素自身向左移动一半宽度，这样元素的中心点就和容器中心点完全对齐，不管DATE的内容长度是多少，都能精准居中。

备选方案（不用绝对定位） #

如果不想用绝对定位，可以换成Grid布局，实现起来更直观：

.flex-items {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-left: 17px;
}

.abcd1 {
  grid-column: 1; /* 放在第一列，自然居左 */
}

.date1 {
  grid-column: 2; /* 放在中间列，自动居中 */
}

这个方法用三列网格，左右两列自动平分剩余空间，中间列的DATE就会自然居中，同时ABCD保持在左列。

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