【CSS】文字を縦横中央に置く方法

今回は､CSSにおける文字を縦横中央に置く方法について書いていきたい｡

HTML

HTMLはこんな感じになります｡

<div class="photoBox">
<p>image</p>
</div><!-- /.photoBox -->

初心者でもわかる内容となっております｡

念のため書いておくと､photoBoxというクラス名を付けています｡

最も簡単｡CSSの基本になりますね｡

CSS

CSSは以下になります。

.photoBox {
  display: table;
  width: 300px;
  height: 200px;
  text-align: center;
  background: #ccc;
}

.photoBox p {
  display: table-cell;
  vertical-align: middle;
}

簡単に言うと､親要素（photoBox）に対して､｢display: table｣を設定｡横方向に中央に置きたいので､｢text-align:center｣を書いております｡

あとは､子要素（p）に対して､上のように書きます｡

これで完成｡

横方向だけでしたら簡単ですが､縦方向の中央ともなると､手間が発生します｡

使いどころ

今回､HTMLコーディングをしていて､写真選びがとてもめんどくさかったです｡

過去に自分で撮影した写真を使っていましたが､選ぶのがとてもめんどくさい｡

とくに誰かに渡すとかではなくて､テストサイトを作成し､様々なレイアウトに挑んでいます｡

そして､｢写真選ぶのめんどくさ｣と思いまして､上のコードを書きました｡

まぁ､文字を入れなければ飛躍的に簡単になりますが､文字を入れたいので上のようにしました｡

どうせ文字を入れるなら中央でということで､書いてみました｡

さいごに

文字の縦方向の中央はかなり手間です｡

しかし､写真を選ばなくても良いというお手軽さ｡

今後､ガンガン使っていきたいと思っています｡