How to center a div with many elements

Question

I'm trying to center my div in html code. It has image and texts also, so when I try centering it div changes it's form. I tried it by adding display: flex; in my div element but images and texts goes to one place and they cover each other.

Here is my code:

body {
  background-color: #d5e1ef;
}

div {
  width: 320px;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  padding: 16px;
  display: flex;
}

img {
  max-width: 100%;
  border-radius: 10px;
}

<div>
  <img src="./image-qr-code.png" />
  <h1>Improve your front-end skills by building projects</h1>
  <p>
    Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
  </p>
</div>

Please specify whether you mean horizontal centering, vertical centering, or both. — Schuyler Sloane, Oct 15 '22 at 17:34

score 1 · Answer 1 · answered Oct 15 '22 at 17:31

1

div {
    margin: 0 auto;
  }

You can use margin: 0 auto; to align the center your entire div.

answered Oct 15 '22 at 17:31

crescentpartha

36
2

score 1 · Answer 2 · answered Oct 15 '22 at 17:49

1

assuming you are trying to center the content verticaly:

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

answered Oct 15 '22 at 17:49

lightPT

58
5

score 1 · Answer 3 · answered Oct 15 '22 at 18:12

use margin: 0 auto; to center the div.

use flex-direction: column; to align your element vertically.

* {
  border: 1px solid red;
}

body {
  background-color: #d5e1ef;

}

div {
  width: 80vw;
  height: 40vh;
  min-height: fit-content;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto;

  padding: 16px;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  border-radius: 10px;
}

  <body>
    <div>
      <img src="./image-qr-code.png" />
      <h1>Improve your front-end skills by building projects</h1>
      <p>
        Scan the QR code to visit Frontend Mentor and take your coding skills to
        the next level
      </p>
    </div>
  </body>

How to center a div with many elements

3 Answers3