如何在Tailwind CSS中实现div内图片内容的居中对齐

当前圆形边框内的图片未处于圆心位置，使用object-center属性后仍未生效。

尝试的代码 #

Skill组件 #

// Skill组件
function Skill({ directionLeft }: Props) {
  return (
    {/* 外层div */}
    <div className='relative flex cursor-pointer group'>
    {/* 内层图片 */}
      <motion.img 
      className='object-center w-12 h-12 max-w-full border border-gray-500 rounded-full md:h-24 md:w-24 xl:w-32 xl:h-32 filter group-hover:grayscale'
      initial={{ x: directionLeft ? -200 : 200, opacity: 0 }}
      transition={{ duration: 1 }}
      whileInView={{ x: 0, opacity: 1}}
      src="typescript.png"/>
    </div>
  )
}

容器使用代码 #

<div className='grid grid-cols-4 gap-5'>
  <Skill />
  <Skill />
</div>

解决方案 #

object-center属性需要配合object-fit一起使用，仅单独设置object-center不会生效——因为默认的object-fit: fill会直接拉伸图片填满容器，此时没有对齐调整的空间。

修改motion.img的className，添加object-cover（保持图片比例并裁剪多余部分，填满容器）或object-contain（完整显示图片，空白部分留空），再配合object-center即可让图片在圆形边框内居中：

<motion.img 
  className='object-cover object-center w-12 h-12 max-w-full border border-gray-500 rounded-full md:h-24 md:w-24 xl:w-32 xl:h-32 filter group-hover:grayscale'
  initial={{ x: directionLeft ? -200 : 200, opacity: 0 }}
  transition={{ duration: 1 }}
  whileInView={{ x: 0, opacity: 1}}
  src="typescript.png"/>

• 使用object-cover：图片会保持原有比例，裁剪超出圆形边框的部分，确保填满容器且居中。
• 使用object-contain：图片会完整显示，若比例与正方形容器不符，圆形边框内会出现空白区域，但图片始终居中。

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