如何用calc()批量居中不同尺寸div？避免重复编写代码

制作个人作品集时，需要将多个不同尺寸的div在视口内居中。已用calc()实现单个元素居中，但不想重复编写相关代码。现有代码给多个不同高度的div设置了重复的id="piece"，希望仅用少量代码（如2行），通过属性引用结合calc()实现所有div的居中。

现有代码如下：

CSS代码 #

/*what i tried*/

#piece{
    top: calc((150px - attr(height))/2);
    left: calc((150px - attr(height))/2);
    position: absolute;
}

.piece-1{
    height: 150px;
    aspect-ratio: 1/1;
    background-color: #00FEFC;
}

.piece-2{
    height: 100px;
    aspect-ratio: 1/1;
    background-color: #FF3131;
}

.piece-3{
    height: 70px;
    aspect-ratio: 1/1;
    background-color: blanchedalmond;
}

.piece-4{
    height: 40px;
    aspect-ratio: 1/1;
    background-color: aquamarine;
}

HTML代码 #

<div class="loading">
    <div class="piece-1" id="piece"></div>
    <div class="piece-2" id="piece"></div>
    <div class="piece-3" id="piece"></div>
    <div class="piece-4" id="piece"></div>
</div>

先修正两个基础问题 #

• HTML中id必须唯一，重复的id="piece"是无效的，换成统一的class（比如.piece）来批量控制样式。
• CSS的attr()函数目前只能读取HTML元素的属性（比如data-*），无法直接获取CSS定义的height值，所以你之前的写法不会生效。

方案1：用CSS变量+calc实现（符合你“属性引用+calc”的需求） #

核心居中样式仅2行，配合统一class即可：

修改后的HTML

<div class="loading">
    <div class="piece piece-1"></div>
    <div class="piece piece-2"></div>
    <div class="piece piece-3"></div>
    <div class="piece piece-4"></div>
</div>

修改后的CSS

/* 核心居中样式，仅2行 */
.piece {
    position: absolute;
    top: calc((150px - var(--h)) / 2);
    left: calc((150px - var(--h)) / 2);
}

/* 为每个元素定义高度变量 */
.piece-1 { --h: 150px; height: 150px; aspect-ratio: 1/1; background-color: #00FEFC; }
.piece-2 { --h: 100px; height: 100px; aspect-ratio: 1/1; background-color: #FF3131; }
.piece-3 { --h: 70px; height: 70px; aspect-ratio: 1/1; background-color: blanchedalmond; }
.piece-4 { --h: 40px; height: 40px; aspect-ratio: 1/1; background-color: aquamarine; }

方案2：更简洁的居中方式（无需calc，推荐） #

如果只是要实现居中，完全不用写calc，用transform: translate(-50%, -50%)可以自动适配任意尺寸，核心样式仅2行：

.piece {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 保留原有各元素的高度、背景等样式 */
.piece-1 { height: 150px; aspect-ratio: 1/1; background-color: #00FEFC; }
.piece-2 { height: 100px; aspect-ratio: 1/1; background-color: #FF3131; }
.piece-3 { height: 70px; aspect-ratio: 1/1; background-color: blanchedalmond; }
.piece-4 { height: 40px; aspect-ratio: 1/1; background-color: aquamarine; }

这种方式不需要额外定义变量，自动计算偏移量，代码更简洁，兼容性也更好。

备注 #

如果要相对于父容器.loading居中，需要给.loading添加position: relative，否则绝对定位的元素会默认相对于视口定位。

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