如何使用css将页面标题居中？

Question

我有一个汉堡菜单，当点击它时，它会向两个方向扩展，我还有一个页面标题，我希望它以页面为中心，但它不想工作。 到目前为止，我最幸运的是添加了一个边距，但是当我单击汉堡菜单时标题会移动。 在求助于询问之前，我尝试了几种选择，但它们似乎都破坏了代码或什么也不做。 下面是与当前图像对应的图像和代码。

#top {
            display:flex;
            background-color:black;
            width:100%;
            height: 200px;
            padding:5px;
        }
        #top #menu {
            width:30px;
            height:30px;
            border: 2px solid white;
        }
        #top h1{
            display:flex;
            flex-direction:row;
            color:red;
            justify-content:center;
        }

Answer 1

尝试文本对齐：居中； 而不是 justify-content: center;