title: centering of content horizontal and vertical in a fixed Dimensional div
body: <p>I want to to have content like below 
  <br>
  <img src="https://i.stack.imgur.com/CHVDM.jpg" alt="1">
  for this first one I used line-height 40px</p>
  
  <p><img src="https://i.stack.imgur.com/5Rsfb.jpg" alt="enter image description here">
  for the second one I used line-height 120px</p>
  
  <p><strong>This means as content varies I have to change the line-heights 
  Is there any way to make this type of centering in a fixed dimensional div without 
  changing the class</strong> </p>
  
  <p>Can I do this without Javascript ? 
  If I use height as 120px I am getting div s like this ( I dont want this ) 
  <img src="https://i.stack.imgur.com/iKw5C.jpg" alt="enter image description here"></p>
  
  <p>style of the div is</p>
  
  <pre><code>&lt;style&gt;
   .rectangle {
          postion:absolute;
      box-shadow: 10px #333;
      border-radius: 23px;
      border-top-right-radius: 0;
      border:6px solid;
      block:inline;
      line-height: 123.6px;
      width:200px;
      background-color: #444;
      float: left;
      margin: 5px;
      text-align: center;
      color:white;
     font-weight:900;
  
      text-decoration:none;
  }
  &lt;/style&gt;
  </code></pre>