Vertically aligned content in segment (Semantic UI)

Question

Is there a way to center vertically a content inside a segment class div? I've got the following markup:

<div class="stretched row">
  <div class="two wide column">
    <div class="ui basic segment">
      <select>
        <!-- OPTION VALUES IN HERE -->
      </select>
    </div>
  </div>
  <div class="column">
    <div class="ui basic segment>
     <!-- DIV CONTENT -->
    </div>
  </div>
  <div class="column">
    <div class="ui basic segment">
      <!-- DIV CONTENT -->
    </div>
  </div>

Now, thanks to the stretched row class, all 3 columns have the same height, and so do the segment divs inside them, looking like this:

I'd like that the content inside the 3 segments was vertically centered inside of them. Instead, they always appear at the top. I've tried adding class="ui middle aligned basic segment" but it doesn't work. Adding class="middle aligned column" to the parent columns center the segment inside of them but they don't take up all the vertical space of the column and, as they have border and colored background, it looks odd (each segment has its own height).

I'd like to avoid adding padding to the segments, because I don't know the heights of them and its content varies from 1 line (a select) to several lines of text (from 2 to 7 lines, depending on what the user selects).

Thanks!

Answer 1

As @VXp suggested, applying {display: flex; align-items: center} to the segment class worked perfectly.