Why is the div box not centered when I used flexbox?

Question

So, I have been wondering why the div in this code has refused to work with justify-content: center;

.txt-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  background-color: #D0D3D4;
  width: 50%;
  border: 3px solid #17202A;
}

<section class="bg">

  <div class="txt-container">
    <div class="box">
      <div class="txt-box">
        <p class="propmt-text">Hello, what's your name?</p>
      </div>
      <div class="txt-box">
        <p class="propmt-text">Hello, what's your name?</p>
      </div>
      <div class="nameparabox">
        <p class="nameparagraph">My name is </p>
        <p class="namefield"></p>
      </div>
    </div>
  </div>
</section>

So, basically, I want the div with the class name 'box' to be centered on the screen along with the contents inside it. Why is justify-content not working? If I use 'margin: auto;' it works.

Answer 1

That is because of flex-direction: column;, in that situation the main axis is no longer horizontal and you should use align-items:center;.

The main axis of a flex container is the primary axis along which flex items are laid out. It is not necessarily horizontal and it depends on the flex-direction property.

.txt-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items:center;
}
.box {
    background-color:#D0D3D4;
    width: 50%;
    border: 3px solid #17202A;
}

<div class="txt-container">
    <div class="box">
        <div class="txt-box">
            <p class="propmt-text">Hello, what's your name?</p>
        </div>
        <div class="txt-box">
           <p class="propmt-text">Hello, what's your name?</p>
        </div>
        <div class="nameparabox">
            <p class="nameparagraph">My name is </p>
            <p class="namefield"</p>
        </div>
    </div>
</div>