<div id='container1'>
  <h3>Parent Container 1</h3>
  <div id='child1'>
    <h3>Child Container (using margin: 0 auto)</h3>
  </div>
</div>
<div class='spacer'></div>
  <h3>Parent Container 2</h3>
<div id='container2'>
  <div class='child2'>
       <h3>Flex Child 2<h3>
  </div>
    <div class='child2'>
      <h3>Flex Child 2<h3>
  </div>
    <div class='child2'>
      <h3>Flex Child 2<h3>
  </div>
   </div>
  <div class='spacer'></div>
<div id='container3'>
  <h3>Parent Container 3</h3>
  <div id='child3'>
    <h3>Child Container (using text-align:center)</h3>
  </div>
</div>

  
  

/* using margin: 0 auto */
#container1 {
  border: 5px solid #5D3FD3;
  height: auto;
  margin: 0 auto;
}

#child1 {
  border: 3px solid #9370DB;
  width: 50%;
  height: 200px;
  margin: 0 auto;
  background-color: #9370DB;
  color: white;
}

#container1 h3, #container2 h3, h3  {
  text-align: center;
}

.spacer {
  margin: 4% 0;
}

/* using flexbox */
#container2 {
  border: 5px solid #4B0082;
  display: flex; 
  justify-content: center;
  align-items: center;
}

.child2 {
  border: 3px solid white;
  height:250px;
  width: 20%;
  background-color: #E6E6FA;
}
/* using text-align */
#container3 {
  border: 5px solid  #CF9FFF;
  text-align: center;
}

#child3 {
  border: 3px solid 	#CCCCFF;
  height: 200px;
  width: 50%;
  display: inline-block;
  background-color: 	#CCCCFF;
  color: white;
}