li要素を親要素の上下中央に配置したい

Question

###やりたいこと
floatで横に並べたli要素をouterブロックの上下中央に配置したいです。どうすれば良いか知恵をお貸しください。

  <div class="outer">
    <ul class="inner">
      <li>apple</li>
      <li>banana</li>
    </ul>
  </div>

.outer {
    height: 100px;
    border: 1px solid #000;
}
li {
    float: left;
}

Answer 1

FlexBoxを使うのがお勧めです。

.outer {
    height: 100px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}