上下センタリング① vertical-align: middle;
左右センタリング①との組み合わせ
「vertical-align: middle;」により、「display: table-cell;」指定した自ブロックレベル要素が上下センタリングされる。
親となるブロックレベル要素に「display: table;」を指定する。
左右の配置は、自ブロックレベル要素の「text-align:」に従う。

<!-- 上下センタリング① vertical-align: middle; -->
    <div style="
      display: table;
      height: 400px;
      width: 100%;
      background-color: #FFFFCC;
    ">
      <div style="
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      ">
        <span>
        <b>上下センタリング① vertical-align: middle;</b><br/>
        左右センタリング①との組み合わせ<br/>
        「vertical-align: middle;」により、「display: table-cell;」指定した自ブロックレベル要素が上下センタリングされる。<br/>
        親となるブロックレベル要素に「display: table;」を指定する。<br/>
        左右の配置は、自ブロックレベル要素の「text-align:」に従う。<br/>
        </span>
        <img src="image_s.jpg">
      </div>
    </div>