横並びにした<ol><li>の高さを中央にした

Question

以下のように、高さを有する<div>の中にある横並びの<ol><li>の高さを中央に寄せたいのですがうまく設定することができません。
いろいろ調べてみるとvertical-align: middleを設定するなどがヒットするのですが、適用できる要素とできない要素があるようで、例えばolにstyle="display:table"、liにstyle="display:table-cell"などが例で上がっているのですが、横並びにするために既にliにはstyle="display:inline"が設定されるため、うまく実装することができません。
何か良い解決策はございませんでしょうか？
よろしくお願い申し上げます。

JSFiddleのサンプル

<div class="wrapper">
  <div class="content">
    <ol>
      <li>1</li>
      <li>2</li>
    </ol>
  </div>
</div>

.wrapper{
  width:100%;
  height:50px;
  background:skyblue;
}
.content{
  
}
ol{
  list-style-type: none;
  padding-left:0;
  margin-block-start: 0;
  margin-block-end: 0;
}
li{
  display:inline;
}

Answer 1

いくつかやり方はありますが、最近はflex boxでの調整が多いと思います。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

こんな感じでどうでしょうか？

.wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100%;
  height:50px;
  background:skyblue;
}

細かい説明はURLのチートシートを見ていただければと思いますm(__)m

Comments

[SugiuraY]

削除

[pegy]

コメントありがとうございます。
flex-boxが対応しやすかったです。助かりした！

Answer 2

固定値の指定になっちゃいますが、olのline-heightを.wrapperと同じ50pxにするという手があります。（行は折り返すことなく.wrapperに収まるという前提で。）

Comments

[pegy]

ありがとうございます。line-heightの高さの設定は前後の要素とどのような依存関係にあるのかあまりはっきりしないため、利用は避けてきたのですが、親要素と同じ高さを付与すれば少なくとも中央寄席になるのですね。

[itagagaki]

.