title: Aligning a Div element in a Div
body: <p>I am not able to align the <code>div</code> element inside a <code>div</code> to center.</p>
  
  <p><a href="https://i.stack.imgur.com/lf9wX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lf9wX.png" alt="enter image description here"></a>.</p>
  
  <p>The image shows that the inner <code>div</code> elements are not aligned in center.</p>
  
  <p>My code is given below</p>
  
  <pre><code>&lt;div class="row ph"&gt;
   &lt;div class="col-sm-3 phi"&gt;&lt;/div&gt;
   &lt;div class="col-sm-3 phi"&gt;&lt;/div&gt;
   &lt;div class="col-sm-3 phi"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <code>style.css</code> is given below.</p>
  
  <pre><code>.ph
  {
  background-color: green;
  position : relative;
  margin : 0 auto;
  }
  
  .phi
  {
  background-color: yellow;
  width: 20%;
  margin: 50px;
  height: 250px;
  }
  </code></pre>
  
  <p>when I searched for the solution, I found about the <code>position</code> and <code>margin auto</code> attributes. Can you help me with the solution?</p>