title: How to bring a text at the center of a square box in HTML/CSS?
body: <p>I have a design below which I am trying to replicate in HTML/CSS:</p>
  
  <p><a href="https://i.stack.imgur.com/VoiBb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VoiBb.png" alt="enter image description here"></a></p>
  
  <p>The above design has 2 boxes with text "Icon" at the center of each. </p>
  
  <p>At this moment, I am able to get this in <a href="https://jsfiddle.net/902wtjtv/3/show/" rel="nofollow noreferrer">fiddle</a> with text "icon" not at the center of a box. </p>
  
  <p>The HTML and CSS codes which I have used to get that box and the text "icon" are:</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="squares"&gt;
        &lt;div class="icon1"&gt;
           &lt;p&gt;Icon&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="icon2"&gt;
           &lt;p&gt;Icon&lt;/p&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.icon1,
  .icon2 {
      width: 200px;
      height: 200px;
      display: inline-block;
      background: #F5F8FA;
  }
  
  .icon1 {
      margin-right: 10%;
      border-style: ridge;
  }
  
  .icon2 {
      margin-left: 10%;
      border-style: ridge;
  }
  </code></pre>
  
  <p>I think I have to put <code>display: flex; align-items: center; justify-content: center;</code> to make icon text come at the center of a box but unfortunately its not working for some reasons:</p>
  
  <pre><code> .icon1 {
          margin-right: 10%;
          border-style: ridge;
          display: flex;
          align-items: center;
          justify-content: center;
      }   
  
   .icon2 {
          margin-left: 10%;
          border-style: ridge;
          display: flex;
          align-items: center;
          justify-content: center;
          }
  </code></pre>