如何使用Tailwind CSS实现侧边菜单垂直居中

你的白色盒子无法垂直居中，核心原因是父容器未设置合适的布局来支撑垂直居中的条件。可以通过以下两种方式修改：

方法一：直接给aside添加flex布局 #

修改aside的class，让它成为flex容器并实现垂直水平居中：

<aside class="hidden lg:block h-screen flex items-center justify-center">
    <div>
        <div class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5 m-auto">
            <ul class="flex flex-col items-center">
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div>
</aside>

方法二：给aside的子div添加全屏高度与flex布局 #

如果不想修改aside的布局，可以给内层的div添加h-full flex items-center类，让它撑满aside的高度并实现垂直居中：

<aside class="hidden lg:block h-screen">
    <div class="h-full flex items-center">
        <div class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5 m-auto">
            <ul class="flex flex-col items-center">
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div>
</aside>

原理说明 #

• h-screen让aside占满视口高度，但内层元素默认不会继承这个高度，需要通过h-full或flex布局让父容器撑满高度。
• flex items-center会让flex容器内的子元素在交叉轴（垂直方向）上居中，配合justify-center可实现水平居中（方法一）。
• 白色盒子的m-auto在flex容器中也能辅助实现居中，但前提是父容器有足够的高度空间。

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