title: Positioning a div in the middle of another div
body: <p>I want to position the plus symbol in the below smack in the middle of the circle. Now i tried using top , left properties. That worked only for one device. When I view the page on a smartphone, all is lost. So I need a method position without using top and left and such that moving the circle will not affect the plus(it will remain in the center).</p>
  
  <p>My code :</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div id="button"&gt;&lt;div id="plus"&gt;+&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;style&gt;
  
      #button
      {
          position : relative;
          width : 100px;
          height : 100px;
          border-radius : 100%;
          background-color : red;
      }
  
      #plus
      {
          display : inline-block;
          position : absolute;
          width : 50%;
          height : 50%;
          margin : auto;
          left : 5px;
          font-family : sans-serif;
          font-size : 40px;
          color : black;
          vertical-align : middle;
          text-alignment : center;    
  
      }
  &lt;/style&gt;
  </code></pre>
  
  <p></p>