如何垂直对齐径向渐变？background-position:center center失效问题

你的问题出在径向渐变的圆心定位和背景尺寸的配合上：当前你把径向渐变的圆心固定在渐变自身的20px 20px位置，同时background-size的高度和元素高度完全一致，加上repeat-y，导致每个渐变切片都从顶部开始排列，自然无法实现垂直居中。

修改方案如下：

1. 将径向渐变的圆心从固定像素值改为相对位置center（或50% 50%），让圆心在每个渐变切片内垂直居中
2. 保持background-repeat: repeat-y和水平居中的设置，调整背景尺寸的高度为auto

修改后的CSS代码：

.skeleton-yqjgac1o2g6:empty {
  height: 133px; 
  background-color: red; 
  border-radius: 0; 
  background-image: radial-gradient( circle 20px at center, #F5F7F9 19px, transparent 20px );
  background-repeat: repeat-y;
  background-size: 40px auto;
  background-position: center center;
}

原理说明 #

• radial-gradient( circle 20px at center ... )：让圆形渐变的圆心在每个背景切片的中心位置，而非固定的顶部偏移
• background-size: 40px auto：让背景切片的高度自适应元素高度，保证渐变圆心在元素垂直方向上居中对齐
• 保留background-position: center center确保水平方向的居中效果

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