Cannot center vertically

Question

I want to center both horizontally and vertically the page.

<body>
<div class="container">
    <main>
        <section>
            <nav>
                <ul>
                    <li>
                        <a href="create/bookForm.html">Create Book</a>
                    </li>
                    <li>
                        <a href="create/authorForm.html">Create Author</a>
                    </li>
                    <li>
                        <a href="create/publisherForm.html">Create Publisher</a>
                    </li>
                </ul>
            </nav>
        </section>
    </main>
</div>
</body>

While I achieved success with horizontal centering by setting all width to 100% and container's width to 50% and margin auto. However the same method doesn't seem to work vertically (height 50%).

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    color: #444;
    font-family: sans-serif;
}

.container {
    height: 50%;
    width: 50%;
    margin: auto;
}

@Rounin-GlorytoUKRAINE This does some crazy stuff to the page. It kinda did nothing, but when enter Inspect mode, entire body comes down I say 25%. — , Mar 29 '22 at 09:38
@Freddy - I'm guessing you'll also need to add: `body { min-height: 100vh; }` — Rounin, Mar 29 '22 at 10:00

score 1 · Answer 1 · answered Mar 29 '22 at 09:32

Use flex properties

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  color: #444;
  font-family: sans-serif;
}

.container {
  height: 50%;
  width: 50%;
  margin: auto;

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

<div class="container">
  <main>
    <section>
      <nav>
        <ul>
          <li>
            <a href="create/bookForm.html">Create Book</a>
          </li>
          <li>
            <a href="create/authorForm.html">Create Author</a>
          </li>
          <li>
            <a href="create/publisherForm.html">Create Publisher</a>
          </li>
        </ul>
      </nav>
    </section>
  </main>
</div>

What is taking 25% of page? – Nitheesh Mar 29 '22 at 10:08 — Nitheesh, Mar 29 '22 at 10:08

Cannot center vertically

1 Answers1