求助：修改默认样式以居中Avada作品集网格的CSS方案

数据老陈

2026-7-3

解决绝对定位作品集项目的居中问题

问题根源分析

子元素使用position: absolute导致常规的text-align、flex居中方法失效；
设置33%宽度时换行，是因为元素默认box-sizing: content-box，额外的内边距/边框会让实际宽度超过父容器，触发换行。

解决方案一：用Grid布局覆盖绝对定位（推荐）

直接通过Grid布局重新控制容器和子元素的排版，既能实现居中，又能避免宽度计算的麻烦：

/* 替换成你的父容器类名/选择器 */
.portfolio-container {
  position: relative; /* 保留原有相对定位，避免影响页面其他元素 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5%; /* 控制列之间的间距，可按需调整 */
  width: 95%; /* 限制容器最大宽度，避免过宽 */
  max-width: 1200px;
  margin: 0 auto; /* 让容器本身居中 */
}

/* 覆盖子元素的绝对定位，让Grid控制位置 */
.portfolio-container article {
  position: static !important;
  width: 100% !important;
  box-sizing: border-box; /* 确保内边距/边框不影响宽度计算 */
}

解决方案二：修复绝对定位元素的偏移

如果无法修改子元素的定位属性，可以通过调整每个项目的left值实现居中：

/* 先确保子元素宽度计算正确 */
.portfolio-container article {
  box-sizing: border-box;
  width: 32% !important;
}

/* 计算间距：(100% - 3*32%) / 2 = 2%，分配到左右两侧 */
.portfolio-container article:nth-child(3n+1) {
  left: 2% !important;
}
.portfolio-container article:nth-child(3n+2) {
  left: calc(2% + 32%) !important;
}
.portfolio-container article:nth-child(3n+3) {
  left: calc(2% + 64%) !important;
}