how to use css to center page title?

Question

I have a hamburger menu that when clicked, it expands in both directions, I also have a page title that I would like to have centered on the page, but it doesn't want to work. The most luck I've had thus far is with adding a margin, but then the title moves when I click the hamburger menu. I tried several options before resorting to asking, but they all seem to break the code or do nothing. Below are images and code corresponding to the current images.

#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

Try text-align: center; instead of justify-content: center;