Element not centering in container css

Question

I tried everything including display block and margin auto and flexbox justify-content: center; but nothing seems to work.. I am new to css so if you're wiling to help you will mot probably find a minimal error that no one else does that changes everything.

.container {
    width: 1024px;
    min-height: 1000px;
    background-color: red;
    margin: 10px auto;
}

header {
    width: 100%;
    height: 150px;
    background-color: black;
}

.logo {
    margin: auto;
}

<body>
    <div class="container">
        <header>
            <div class="logo">
                <a href="index.html">
                    <img src="images/Logo-lowres.svg" alt="">
                </a>
            </div>
        </header>
    </div>
</body>

You can use an image placeholder instead of a logo or some text — Maulik Sakhida, Jan 03 '21 at 17:54
Take a look here. https://placeimg.com Anyway, I think this question is a duplicate. — AbsoluteBeginner, Jan 03 '21 at 17:58
The `logo` div won't need to be centered as it is 100% wide. I suspect you are trying to center the image which is a different issue. — Paulie_D, Jan 03 '21 at 17:59

score 2 · Answer 1 · answered Jan 03 '21 at 18:10

.container {
  width: 1024px;
  min-height: 1000px;
  background-color: red;
  margin: 10px auto;
}

header {
  width: 100%;
  height: 150px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
  <div class="container">
    <header>
        <a href="index.html">
          <img src="https://via.placeholder.com/100" alt="">
        </a>
    </header>
  </div>
</body>

Add

display: flex;
justify-content: center;
align-items: center;

to your header and remove the margin from the .logo div. I don't know if you really need the .logo div, otherwise you can remove it.

score 1 · Answer 2 · answered Jan 03 '21 at 18:15

HEre you go

.container {
    width: 1024px;
    min-height: 1000px;
    background-color: red;
    margin: 10px auto;
}

header {
    width: 100%;
    height: 150px;
    background-color: black;
}

.logo {
    margin: auto
       display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

img {
  border-radius: 50%;
}

<div class="container">
        <header>
            <div class="logo">
                <a href="index.html">
                    <img src="https://i.picsum.photos/id/557/200/200.jpg?hmac=Y3oVAxcM0NGQ6OBLGhCOaRI9_TBDXdJFB8547MBovxU" alt="">
                </a>
            </div>
        </header>
    </div>

Basically, you can either apply margin 10px auto and display block to the image element or do like in the snippet, use flexbox on the parent element.

Element not centering in container css

2 Answers2