html - How to vertically align the child divs in a parent div? -

so have 1 parent div , 4 child divs. have horizontally aligned child divs in parent div, not vertically aligned, it's graph way child divs placed. how vertically align them?

.servicescontent {    border: solid red 2px;    font-family: arial;    width: 70%;    margin: 0 auto;  }  .servicesh1 {    text-align: center;    color: #3a414e;  }  .servicescontent h2 {    color: #3a414e;  }  #h3 {    color: #3a414e;  }  .contentlists {    border: solid green 2px;    width: 100%;    text-align: center;  }  #lists {    display: inline-block;    text-align: center;    padding: 5px;    margin: 5px;    border: 1px solid blue;    height: 190px;  }

<div class="servicescontent">    <h1 class="servicesh1">services</h1>    <h2>help!</h2>    <p>child divs not vertically aligned</p>    <p>help</p>      <div class="contentlists">      <div id="lists">        <h3 id="h3">first</h3>        <ul>          <li>afasasf</li>          <li>fasfsafas</li>        </ul>      </div>      <div id="lists">        <h3 id="h3">second</h3>        <ul>          <li>gdagadg</li>          <li>agadgadg</li>        </ul>      </div>      <div id="lists">        <h3 id="h3">third</h3>        <ul>          <li>dsfdsfs</li>        </ul>      </div>      <div id="lists">        <h3 id="h3">fourth</h3>        <ul>          <li>dagadg</li>          <li>agadgdhtjrs</li>          <li>jjee</li>          <li>ejtejtjejejgfhdgh</li>          <li>gtejjtejejtds</li>        </ul>      </div>    </div>

try this

 #lists {                   display: inline-block;                   text-align: center;                   padding: 5px;                   margin: 5px;                   border: 1px solid blue;                   height: 190px;              vertical-align: middle;                 }