How to center an image in the header?

Question

How do I center an image in a header? I have a 200x200 image I want to set the sides automatically and at the top of the header

@charset "utf-8";

body {
    background-color: black;
}

div#interface {
    padding: 15px;
}

/* Divisão da interface*/

div#interface {
    width: 1500px;
    background-color: white;
    margin: -21px auto 0px auto;
}

/* Formataçao Menu*/

nav#menu {
    display: block;
}

nav#menu ul {
    list-style: none;
    text-transform: uppercase;
    position: absolute;
    top: -20px;
    left: 1150px;
}

nav#menu li {
    display: inline-block;
    background-color: black;
    padding: 10px 15px 10px 15px;
    margin: 2px;
    box-shadow: 0px 0px 3px rgba(255, 255, 255,.5);
}

nav#menu a {
    text-decoration: none;
    color: white;

}

nav#menu a:hover {
    text-decoration: underline;
}

/* Formataçao cabecalho*/

header#cabecalho {
    height: 300px;
}

header#cabecalho img#logo {
   
}

        <div id="interface">
            <header id="cabecalho">
                <hgroup>
                    <h1>Red Hot Chilli Peppers</h1>
                    <h2>RHCP</h2>
                </hgroup>
                    <nav id="menu">
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="artists.html">Artists</a></li>
                            <li><a href="songs.html">Songs</a></li>
                            <li><a href="albums.html">Albums</a></li>
                        </ul>
                    </nav>
                <img id="logo" src="https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012011/red_hot_chili_peppers.png?itok=7edUsGhl" alt="logo">

            </header>

        </div>

Answer 1

This CSS centers the image horizontally, within the header#cabecalho:

header#cabecalho img#logo {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

You can put the image at the top by adding top: 0; or by tag <img> before the others in <header id="cabecalho">.

EDIT: If you also want the logo not to go over the titles, use the property z-index in the <hgroup>, where the titles are located:

hgroup {
    position: relative;
    z-index: 1;
}

Answer 2

I went through the same problem recently solved that way on my website.

<nav class=" navbar navbar-expand-lg navbar-light bg light fixed" style="font-size: 20px;letter-spacing: 1px;background: #16B6C6;">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Alimentação</a>
            </li>
            <li><a class="nav-link" href="#">Descanso</a></li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="imagens/logo-treinos2.jpg" ">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Exercicios</a>
            </li>
            <li>
              <a class="nav-link" href="#">Tabelas</a>
            </li>

        </ul>
    </div>
</nav>