如何使用CSS实现网格圆形元素内的文本垂直居中

数据老陈

2026-8-26

问题原因

使用padding-bottom: 48%的技巧撑出正方形圆形时，.grid-item的内容区域实际高度为0，元素的可视尺寸完全由内边距撑起。此时给元素设置的flex居中属性缺少有效的内容高度作为对齐参照，内部文本自然无法正确垂直居中。同时给内部span设置display: table-cell会和父元素的flex布局规则冲突，进一步导致居中属性失效。

修复方案

无需使用transform暴力偏移，仅调整两处样式即可实现规范的垂直居中效果，且完全保留原有网格错位布局逻辑：

给.grid-item添加相对定位，作为内部文本容器的定位基准
移除span上冲突的table-cell显示规则，改用绝对定位让文本容器和圆形尺寸完全匹配，再通过flex实现水平+垂直双向居中

修正后可直接运行的CSS代码

.grid {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #CCC;
}
.grid::after {
  content: "";
  display: block;
  clear: both;
}
.grid-item {
  position: relative;
  text-decoration: none;
  overflow: hidden;
  width: 48%;
  padding-bottom: 48%;
  background-color: rgba(124, 139, 224, 0.8);
  border-radius: 50%;
  float: left;  
  margin: 1%;
  margin-top: -4%;
  color: black;
}

.grid-item > span { 
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  text-align: center;
  padding: 0 8%; /* 可选：避免长文本贴到圆形边缘 */
}

.grid-item:nth-child(1),
.grid-item:nth-child(2) {
  margin-top: 1%;
}

.grid-item:nth-child(3n + 3) {
  margin-left: 25%;
}

.grid-item:nth-child(3n + 4) {
  clear: left;
}

方案优势