上下センタリン②グ vertical-align: middle;
左右センタリング②との組み合わせ
「vertical-align: middle;」により、「display: table-cell;」指定した自ブロックレベル要素が上下センタリングされる。
親となるブロックレベル要素に「display: table;」を指定する。
これは、親となるブロックレベル要素が「margin: 0 auto;」によりセンタリングされている場合。

<!-- 上下センタリング② vertical-align: middle; -->
    <div style="
      display: table;
      width: 80%;
      max-width: 500px;
      height: 500px;
      margin: 0 auto;
      background-color: #FFFFCC;
    ">
      <div style="
        display: table-cell;
        vertical-align: middle;
      ">
        <span>
        <b>上下センタリン②グ vertical-align: middle;</b><br/>
        左右センタリング②との組み合わせ<br/>
        「vertical-align: middle;」により、「display: table-cell;」指定した自ブロックレベル要素が上下センタリングされる。<br/>
         親となるブロックレベル要素に「display: table;」を指定する。<br/>
        これは、親となるブロックレベル要素が「margin: 0 auto;」によりセンタリングされている場合。<br/>
        </span>
        <img src="image_s.jpg">
      </div>
    </div>