why is "left: 50%; transform: translateX(-50%)" not centering my content?

Question

I am trying to center my logo in my header on screens with a width under 901px using media queries. I used left: 50% and translate: transformX(-50%) and it does change the position of the logo from the left of the header to off-center. I want it to be dead on center and I don't understand why it doesn't work.

#bars {
  display: none;
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  height: 26px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

#logo {
  width: 12%;
  margin-left: 3%;
}

#pin {
  margin-right: 3%;
  width: 2%;
  margin-left: auto;
}

nav a {
  margin-left: 20px;
  margin-right: 20px;
}

nav {
  margin: auto;
}

@media screen and (max-width: 900px) {
  nav a {
    display: none;
  }
  nav {
    display: none;
  }
  #bars {
    display: block;
    color: white;
    margin-left: 3%;
  }
  header #logo {
    margin-left: 0;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 15%;
  }
}

<header>
  <i class="fa-solid fa-bars" id="bars"></i>
  <img src="logo.svg" id="logo">
  <nav>
    <a href="index.html">Accueil</a>
    <a href="nosproduits.html">Nos produits</a>
    <a href="apropos.html">&#192; propos</a>
    <a href="contact.html">Contact</a>
  </nav>
  <a id="pin" href="#"><img src="pin.svg"> </a>
</header>

It's because of the `bars`. Your logo element is set to `position: relative` which keeps it in document flow, so its position is affected by the `bars` element. If you set the logo element to `position: absolute` on your small screens, it will fix the issue. — disinfor, Aug 26 '22 at 16:42

score 0 · Answer 1 · answered Aug 26 '22 at 17:26

If you are using left: 50% you need to use it with position: absolute. But you are using flexbox for alignment so you cannot use left` attribute.

I recommend using pure flexbox with CSS of justify-content which can center your content. Look here you may find more info about flexbox.

header .logo {
  display: flex;
}

nav a {
  margin-left: 20px;
  margin-right: 20px;
}

@media screen and (max-width: 900px) {
  nav {
    display: none;
  }
  header .logo {
    justify-content: center;
  }
}

<!DOCTYPE html>
<html>

<head>
    <title>Alignment</title>
    <meta charset="UTF-8" />
</head>

<body>
    <header>
        <div class="logo">
            <img width:'32px' height='32px' src="https://dummyimage.com/32x32/000/fff" id="logo">
        </div>
        <nav>
            <a href="index.html">Accueil</a>
            <a href="nosproduits.html">Nos produits</a>
            <a href="apropos.html">&#192; propos</a>
            <a href="contact.html">Contact</a>
        </nav>      
    </header>

    </script>
</body>

</html>

_But you are using flexbox for alignment so you cannot use left attribute_ This 100 percent incorrect. And you don't need to add an answer for something a comment already solved. — disinfor, Aug 26 '22 at 18:29

why is "left: 50%; transform: translateX(-50%)" not centering my content?

1 Answers1