将家谱设计的第一个元素放在页面的顶部中心

Question

我正在学习一个关于构建具有交互性的家谱设计的教程，设计和交互性都很棒。

沙盒链接：https://codesandbox.io/embed/goofy-sun-ke4bx?fontsize=14&隐藏导航=1&主题=深色

文章链接(内部代码(查看链接

视频链接(家谱看起来如何(查看链接

它工作得很好，但是，树的设计总是从左上角开始。这是做这件事的css：

.genealogy-body{
white-space: nowrap;
overflow-y: hidden;
padding: 50px;
min-height: 500px;
padding-top: 10px;
}

我试着把它改为放在中心，并从中心打开家谱设计的其余部分，但没有成功。它是普通的css，应该就这么简单，有人可能知道让它工作的另一种方法吗？

目标是：保持原样，只需从页面的顶部中心开始绘制家族的开头树。

Answer 1

这可能是问题的解决方案

.genealogy-body{
white-space: nowrap;
overflow-y: hidden;
padding: 50px;
min-height: 500px;
padding-top: 10px;       
display: flex;
justify-content: center;
}