title: CSS: <div> with curved edges and centered text (horizontal & vertical centered)
body: <p>I want to achieve something like shown below. </p>
  
  <p>In the code, i am using fixed height and margin. </p>
  
  <p>How do i achieve the same without the fixed height and margin? 
  How do i center the text vertically?</p>
  
  <p>Note: the white border between the div's is for illustration only.</p>
  
  <p><a href="https://i.stack.imgur.com/0M6Rh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0M6Rh.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
    .div{
      width:160px;
      height:50px;
      background-color: gray;
      margin-top: 10px;
      margin-bottom: 10px;
      display:inline-block;
      text-align: center;
      font-size: 30px;
    }
    .bg-gray-left{
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
    }
    .bg-gray-middle{
      border-radius:0px;
    }
    .bg-gray-right{
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
    .container{
      border:solid 1px gray;
      width: 485px;
    }
    .div:nth-child(1),.div:nth-child(2){
      border-right-color: white;
      border-right-width: 1px;
      border-right-style: solid
    }
  &lt;/style&gt;
  &lt;!-- &lt;div class="container"&gt; --&gt;
  &lt;div class="div bg-gray-left"&gt;div 1&lt;/div&gt;
  &lt;div class="div bg-gray-middle"&gt;div 2&lt;/div&gt;
  &lt;div class="div bg-gray-right"&gt;div 3&lt;/div&gt;
  &lt;!-- &lt;/div&gt; --&gt;</code></pre>
  </div>
  </div>
  </p>