如何使用Tailwind CSS实现上下轮播网格第二行元素垂直居中？

我用Tailwind CSS开发上下轮播组件时，碰到了网格布局的问题：7个元素分3行排列（前两行各2个，第三行1个），第三行的单个元素没法在所在网格行内垂直居中，需要调整实现让这个元素垂直居中。

当前效果 #

前两行元素正常排列，第三行的单个元素靠网格行顶部对齐，未在该行垂直居中。

期望效果 #

第三行的单个元素在所在网格行内垂直居中。

当前实现代码 #

const Carousel = () => {
  return (
    <div className='grid grid-cols-2 gap-12'>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
    </div>
  )
}
export default Carousel;

解决方法 #

方法一：全局设置网格元素垂直居中

给网格容器添加items-center类，让所有网格单元格内的内容在垂直方向上居中对齐：

const Carousel = () => {
  return (
    <div className='grid grid-cols-2 gap-12 items-center'>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
    </div>
  )
}
export default Carousel;

方法二：仅让最后一行元素居中

如果希望其他行元素保持顶部对齐，只让第三行的单个元素居中，给最后一个元素添加self-center类即可：

const Carousel = () => {
  return (
    <div className='grid grid-cols-2 gap-12'>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl self-center'>

        </div>
    </div>
  )
}
export default Carousel;

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