0

Sorry if the title is confusing. I have the main container div with display: flex, justify-content: center, and align-items: center. Inside this div, I have another 2 divs, at the moment everything is centered, my issue is that I want the first div to be centered and the next div to be underneath (image). How can I accomplish this using flex?

enter image description here

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 500px;
  border: solid 1px black;
}
.circle {
  width: 12rem;
  height: 12rem;
  background-color: black;
  border-radius: 9999px;
}
.square {
  width: 12rem;
  height: 6rem;
  background-color: black;
  margin-top: 2rem;
}
<div class="container">
  <div class="circle"></div>
  <div class="square"></div>
</div>

Thanks

alejuu
  • 79
  • 1
  • 8
  • 1
    read the very long accepted answer and you will find what you want and more (scroll and look at the image and you will identify your case) – Temani Afif Mar 10 '20 at 21:10
  • 1
    which leads also to that question. https://stackoverflow.com/questions/36191516/center-and-bottom-align-flex-items the hidden element can be generated via pseudo element if you do not want extra markup ;) – G-Cyrillus Mar 10 '20 at 21:53

0 Answers0