@headlessui/react的Dialog搭配Tailwind CSS无法居中的实现问题

完全和React Portal的实现机制无关，本质是组件DOM结构不符合居中布局的逻辑要求，漏了关键的居中支撑层、元素挂载位置错误。

具体错误点：

• 漏了垂直居中的核心支撑容器：直接把弹窗卡片挂在最外层Dialog下，没有能撑满视口高度、配合弹性布局实现居中的中间包裹层
• 遮罩层挂载位置错误：把Dialog.Overlay塞在了弹窗卡片内部，既会导致遮罩无法全屏覆盖，也会打乱弹窗内部的布局流
• 弹窗卡片缺失必要的定位、宽度适配类名，无法在居中容器内正常排版

按照居中布局的逻辑调整DOM层级，最终可实现双向居中的组件代码如下：

import * as React from "react"
import { Dialog } from "@headlessui/react"

type ModalProps = {
    isOpen: boolean
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}

export const Modal = ({ isOpen, setIsOpen }: ModalProps) => {
    return (
        <Dialog
            open={isOpen}
            onClose={setIsOpen}
            as="div"
            className="fixed inset-0 z-10 overflow-y-auto"
        >
            {/* 核心居中包裹层 */}
            <div className="flex min-h-full items-center justify-center p-4 text-center">
                {/* 全屏遮罩层，与弹窗卡片同级 */}
                <Dialog.Overlay className="fixed inset-0 bg-black/30" />

                {/* 实际弹窗卡片 */}
                <div className="relative flex flex-col bg-gray-800 text-white w-full max-w-md mx-auto py-8 px-4 rounded-lg text-center">
                    <Dialog.Title className="text-red-500 text-3xl">
                        Deactivate account
                    </Dialog.Title>
                    <Dialog.Description className="text-xl m-2">
                        This will permanently deactivate your account
                    </Dialog.Description>

                    <p className="text-md m-4">
                        Are you sure you want to deactivate your account? All of your data
                        will be permanently removed. This action cannot be undone.
                    </p>

                    <div className="flex justify-end">
                        <button
                            className="m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                            onClick={() => setIsOpen(false)}
                        >
                            Deactivate
                        </button>
                        <button
                            className="m-4 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                            onClick={() => setIsOpen(false)}
                        >
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </Dialog>
    )
}

• 最外层Dialog作为固定定位容器，占满整个视口，内置overflow-y-auto属性，保证弹窗内容高度超过视口时可以正常滚动查看
• 中间的居中包裹层设置min-h-full，让自身高度完全撑满整个视口，配合弹性布局的items-center justify-center属性，实现内部弹窗卡片在水平、垂直方向的双向居中
• 全屏遮罩层作为和弹窗卡片同级的固定定位元素，覆盖整个视口，不会干扰弹窗内部的布局流
• 弹窗卡片增加relative定位，保证自身层级在遮罩层上方，不会被半透明遮罩遮挡

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