title: How to align text in middle (vertically)
body: <p>I am struggling with this many hours now and still I can't find a solution. I've made this nice grid  that adjusts with text length and browser resising. The problem now is that I can't get text go the middle of the box.</p>
  
  <p>I've tried everything.. I used several properties in order to achieve this but nothing worked.</p>
  
  <pre><code>text-align: center;
  vertical-align: middle;
  line-height: "same as div";
  </code></pre>
  
  <p>The css code:</p>
  
  <pre><code>.parent {
    text-align:center;
    margin:0px;
    width:100%;
    padding:0px;
    font-size:18px;
    color:#000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  
  .child {
    padding:18px 25px;
    background: rgba(0, 0, 0, .5);
    list-style-type:none;
    width:inherit;
    margin:5px;
  
  }
  </code></pre>