css - How can i center the div inside a parent div?

Question

(This question already has answers here): question from:https://stackoverflow.com/questions/66057273/how-can-i-center-the-div-inside-a-parent-div

Answer 1

If you want to use align the content and its elements into the center, you use CSS property called flex and using align-items:center and justify-content:center.

Here is more about flex Link

.container {
  height: 300px;
  display: flex;
  text-align: center;
  border: 1px solid black;
  align-items:center;
  justify-content:center;
}

.container>div {
  border:1px solid red;
  height:50px;
  display: flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}

<div class="container">
  <div>I'm vertically/horizontally centered!</div>
</div>