将反应门户居中在父元素的顶部答案

【问题标题】：Centering a react portal on top of the parent element将反应门户居中在父元素的顶部
【发布时间】：2020-04-10 13:42:21
【问题描述】：

我已经阅读了很多关于 Portal 的文章，并决定制作一个。

我有一个显示表格的简单反应页面。

所以我制作了一个按钮，当点击该按钮时，表格会模糊并打开门户。

它“有效”，但由于某种原因，表格不像我在阅读的文章中看到的那样居中。

它只出现在页面底部的模糊表格下方。

这是我的传送门：

function MyPortal() {
    return ReactDOM.createPortal(
        <div>
            <div>My first Portal!</div>
            <div>HEY YOU</div>
        </div>,
        document.getElementById('portal-root'),
        document.getElementById('DisplayTable').style.filter = 'blur(5px)'
    )
}

这是我的表函数：

function DisplayTable() {
const [isPortalOpen, setIsPortalOpen] = useState(false);

// some data processing code for the table


return (
    <div id="mainContent">
        <div id="DisplayTable">
            <table>
                <tr>
                    <td>My Table</td>
                </tr>
                <tr>
                    <td><button onClick={() => { setIsPortalOpen(!isPortalOpen); }}>Portal Button</button></td>
                </tr>
            </table>
        </div>
         {isPortalOpen && (
            <MyPortal />
        )}
    </div>
)

这是我的主要 index.js：

ReactDOM.render(
    <React.Fragment>
        <Table />
        <div id="portal-root"></div>
    </React.Fragment>,
    document.getElementById('root')
)

如何才能使门户显示在屏幕中间而不是底部？

我需要使用其他组件或库吗？

谢谢！

【问题讨论】：

标签： css reactjs flexbox react-portal

【解决方案1】：

这就是我的做法。我相信有很多方法可以做到这一点。

我将此添加到门户的主要父 div：

z-index: 100;

然后我将其添加到门户创建的 div 中：

position: absolute; 
background-color: #eee;
border: 1px solid #555;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
height: 75%;
top: 15%; /* push down by 50% of the height of the container */
width: 80%;
margin-top: -25px; /* bring it back up by half of it's height */

就像我说的，有很多方法可以实现这一点，这就是我的方式。

【讨论】：