实现Squarespace图库项标题的垂直水平居中显示

由于Squarespace没有内置调整图库标题位置的选项，你可以通过自定义CSS实现需求，步骤如下：

1. 登录Squarespace后台，进入「设计」>「自定义CSS」面板
2. 将以下代码粘贴到CSS编辑器中：

/* 调整图库标题为图片中央悬浮样式 */
.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 10px;
  margin: 0;
}

/* 隐藏默认的下方标题 */
.gallery-item .sqs-caption-wrapper {
  display: none;
}

可选优化： #

如果希望标题默认隐藏，鼠标悬停时再显示，添加这段代码：

.gallery-item-caption {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item-caption {
  opacity: 1;
}

注意事项： #

部分Squarespace模板的元素类名可能不同，若代码生效异常，可通过浏览器开发者工具（按F12）右键检查图库图片和标题元素，替换代码中对应的选择器（如.gallery-item或.gallery-item-caption）。

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