How to center CSS Flexbox and change the position vertically? What I have tried so far has not worked

Question

So far, with the use of margin: auto I have been able to center my flexbox horizontally but not vertically along my webpage.
I am quite new to CSS and would like some assistance. Thank you.

.container {
    background-image: url(paperbackground.jpg);
    color: #D64933;
    margin: auto;
    width: 500px;
}

.box {
    align-content: center;
    display:flex;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    justify-content: center;
    padding: 2px;
}

    <div class="container">
        <ul>
            <!--Below is an unordered list.-->
            <div class="box"><li>Video Games</li></div>
            <div class="box"><li>Watching technology, hacking and other documentaries.</li></div>
            <div class="box"><li>Chess</li></div>
            <div class="box"><li>Cricket</li></div>
        </ul>
    </div>

[Many, many more](https://www.google.com/search?q=flex+center+horizontally+and+vertically+site:stackoverflow.com) — mplungjan, Aug 09 '22 at 14:03

Laaouatni Anas · Answer 1 · 2022-08-09T14:02:48.897

body {
  /* setting the height to the device height */
  height: 100vh;
  /* solving the bug about scrollbar */
  margin: 0;
  /* using margin auto, basically you don't need to write align-items: center; in body it will automatically work */
  /* so just use flexbox and it will work fine */
  display: flex;
}

.container {
  background-image: url(paperbackground.jpg);
  color: #d64933;
  margin: auto;
  /* for deleting the wrapping thing don't use this 500px line below */
  width: 500px;
}

.box {
  align-content: center;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  justify-content: center;
  padding: 2px;
}

<body>
  <div class="container">
    <ul>
      <!--Below is an unordered list.-->
      <!-- 1 -->
      <div class="box">
        <li>Video Games</li>
      </div>
      <!-- 2 -->
      <div class="box">
        <li>Watching technology, hacking and other documentaries.</li>
      </div>
      <!-- 3 -->
      <div class="box">
        <li>Chess</li>
      </div>
      <!-- 4 -->
      <div class="box">
        <li>Cricket</li>
      </div>
    </ul>
  </div>
</body>

score 0 · Answer 2 · edited Aug 09 '22 at 14:01

The effect can also be achieved by making the container a flexbox. See here center

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .container {
        color: #d64933;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .box {
        text-align: center;
        display: flex;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
        font-weight: bold;
        justify-content: center;
        padding: 2px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <!--Below is an unordered list.-->
        <div class="box"><li>Video Games</li></div>
        <div class="box">
          <li>Watching technology, hacking and other documentaries.</li>
        </div>
        <div class="box"><li>Chess</li></div>
        <div class="box"><li>Cricket</li></div>
      </ul>
    </div>
  </body>
</html>

How to center CSS Flexbox and change the position vertically? What I have tried so far has not worked

2 Answers2