如何使用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

尝试文本对齐：居中；而不是证明内容：居中；