如何用Tailwind CSS实现带侧边栏的居中内容且无重叠

核心思路是通过对称的水平内边距替代单边外边距，让主内容始终以全屏宽度为基准居中，同时避开固定侧边栏的空间。

实现代码 #

<div class="flex min-h-screen flex-col">
    <!-- 侧边栏：大屏固定左侧，小屏隐藏 -->
    <aside class="fixed left-0 top-0 hidden h-full w-[300px] overflow-y-auto border-r py-[70px] lg:block">
        <div class="px-2 py-12">
            <h1>Sidebar content</h1>
        </div>
    </aside>

    <!-- 主内容区域：大屏添加对称padding避开侧边栏，保持全屏居中 -->
    <main class="flex grow">
        <div class="w-full min-h-full px-6 lg:px-[300px]">
            <div class="max-w-[800px] mx-auto flex flex-col h-full p-12">
                <header>header</header>
                <section class="mt-20 grow">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, autem eaque. Corporis soluta qui pariatur fuga laboriosam natus perferendis atque recusandae iste, praesentium ex quas ipsam deleniti tempora esse repudiandae?</p>
                </section>
                <div>Footer</div>
            </div>
        </div>
    </main>
</div>

关键调整说明 #

1. 对称padding避让侧边栏：在lg及以上屏幕尺寸给主内容外层容器设置px-[300px]（与侧边栏宽度一致），左右对称的内边距既让内容避开了左侧固定侧边栏，又保证内部居中元素始终以整个屏幕宽度为基准对齐。
2. 拆分主内容层级：将主内容拆分为「外层空间控制」和「内层内容容器」两层，外层负责处理不同屏幕的水平空间限制，内层专注于内容的最大宽度、居中及布局逻辑，避免flex布局冲突。

原有方案问题分析 #

• 无避让空间的方案：当屏幕宽度缩小至主内容+侧边栏宽度总和以下时，内容会直接覆盖在侧边栏上。
• 单边外边距方案：ml-[300px]会把主内容的居中基准改为「屏幕宽度-300px」，导致内容整体偏移，无法保持全屏居中。

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