Qwertie Qwertie - 2 months ago 8
CSS Question

Use flexbox to center content while not making elements side by side

I am using flexbox to center content with

justify-content: center
which works as intended but flexbox also moves divs to be side by side which I don't want.

Here is an example



.flex {
display: flex;
justify-content: center;
}

.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}

<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>





How can I use flexbox while retaining the default one div on top of the other positioning.

Answer Source

You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.

.flex {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.content {
  width: 100px;
  height 100px;
  color: #000;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}
<div class="flex">
  <div class="content"></div>
  <div class="content"></div>
</div>