Center Center Html with Flex

by black strings

HTML

<div style="height: 500px">
  <div id="my-container">
    <div class="container-child">
      <div>Hellow world<br>Testing</div>
    </div>
  </div>
</div>

CSS

div#my-container {
  height: 100%; /* only work if parent of this container has height defined*/
  border: thick solid blue;
    padding: 0;
    margin: 0;
   display: flex;           /* establish flex container */
    /* flex-direction: column; */  /* make main axis vertical */
    justify-content: center;  /*center items horizontal, in this case */
    align-items: center;   /*  center items vertical, in this case */
}
.container-child {
    /*width: auto;*/
    border: 1px solid red;
    
}