ブロック要素で縦中央揃えなどの文字位置指定するCSS

htmlの「div」などブロックの文字位置を縦中央（上下中央）や中心に揃えるのは単純ではなく、ある程度のCSS設定が必要となります。CSSにも色々な方法があります。

以下では「table-cell」「flex」「position」を使用した文字位置CSSが自動生成されます。生成された「html」「css」などのソースコードは、そのままコピー＆ペーストでご利用ください。

使用するhtmlは同じですが、「table-cell」「flex」「position」で生成されるCSSは異なりますので、いろいろお試しください。

<div class="box" id="makeImg">
  <div>文字の配置<br>テスト</div>
</div>

.box {
  margin         : auto;                 /* サンプル用 中央寄せ */
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  width          : 280px;                /* BOXの幅             */
  height         : 150px;                /* BOXの高さ           */
  background     : #B0C4DE;              /* BOXの背景色         */
  border         : 3px solid #35557f;    /* 枠線の指定          */
 
  display        : table;                /* テーブル属性に変更  */
}
.box div {
  display        : table-cell;           /* セル属性に変更      */
  text-align     : center;               /* 横位置              */
  vertical-align : middle;               /* 縦位置              */
}