如何在马赛克网格项中实现文本元素横竖居中（适配任意尺寸）

核心问题分析 #

你当前用固定的translate-y-[-800%]调整文本位置，这种硬编码的百分比只能适配特定高度容器，无法兼容不同尺寸的网格项。要解决这个问题，得改用基于容器自身尺寸的动态定位，同时统一动画逻辑。

修改后的完整代码 #

<div className='grid grid-cols-5 gap-4'>
    {/* 大网格项 */}
    <div className='group col-span-3 row-span-2 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-full before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition-all before:ease-in-out before:duration-300 hover:before:-translate-y-full'>
        <img
            className='w-full h-full object-cover'
            src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/618ccff33755f5e37b715a20_client%20website%20design.png'
            alt='Project Image'
        />
        <h2 className='absolute text-white-text z-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100'>
            Project Name
        </h2>
    </div>
    {/* 小网格项 */}
    <div className='group col-span-1 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-full before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition-all before:ease-in-out before:duration-300 hover:before:-translate-y-full'>
        <img
            className='w-full h-full object-cover'
            src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/60b5977c662a245446454924_Box%203%20(37)-p-500.png'
            alt='Project Image'
        />
        <h2 className='absolute text-white-text z-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100'>
            Project Name
        </h2>
    </div>
    {/* 其余小网格项重复上述结构即可 */}
    <div className='group col-span-1 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-full before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition-all before:ease-in-out before:duration-300 hover:before:-translate-y-full'>
        <img
            className='w-full h-full object-cover'
            src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/6093c0fef7f40b7d6ebf9645_Box%201%20(17)-p-1080.png'
            alt='Project Image'
        />
        <h2 className='absolute text-white-text z-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100'>
            Project Name
        </h2>
    </div>
    <div className='group col-span-1 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-full before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition-all before:ease-in-out before:duration-300 hover:before:-translate-y-full'>
        <img
            className='w-full h-full object-cover'
            src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/604ef840b64f647c62914dbf_Box%201%20(4)-p-1080.png'
            alt='Project Image'
        />
        <h2 className='absolute text-white-text z-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100'>
            Project Name
        </h2>
    </div>
    <div className='group col-span-1 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-full before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition-all before:ease-in-out before:duration-300 hover:before:-translate-y-full'>
        <img
            className='w-full h-full object-cover'
            src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/60534f6a7a751b11a512c9a2_Box%201%20(36)-p-1080.png'
            alt='Project Image'
        />
        <h2 className='absolute text-white-text z-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100'>
            Project Name
        </h2>
    </div>
</div>

关键改动说明 #

1. 文本动态居中

   • 用left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2实现文本在容器内的绝对居中，这个组合不受容器尺寸影响，适配任何宽高的网格项。
   • 初始状态通过translate-y-full opacity-0把文本移出容器底部并隐藏，hover时用group-hover:translate-y-0 group-hover:opacity-100让文本滑入并显示，动画更自然统一。

2. 伪元素动画优化

   • 把伪元素的过渡属性统一放在before:transition-all里，避免重复代码，同时确保所有属性（位置、透明度等）都能平滑过渡。
   • 用hover:before:-translate-y-full替代hover:before:translate-y-[-100%]，写法更简洁，效果一致。

3. 统一样式复用

   • 所有画廊项都添加group类，确保hover状态能统一触发子元素的动画。
   • 修正了原代码中cover应为object-cover，确保图片正确填充容器。

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