画像やテキストを中央（上下左右真ん中）に配置する方法

• 2015/10/22
• 2015/10/11
• HowTo, Webデザインテクニック
• センタリング

普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも、なぜか真ん中にいかない事が多々あります。でもこの方法は、CSSの position と transform を使って中央（上下左右真ん中）に配置するので、幅や高さを変更しても常に中央に表示されるので、これは便利！！

ってことで覚え書きです。

記述方法

テキストを中央（上下左右真ん中）に配置する時

まずはHTML。例えば、

<div class="wrapper">
  <div class="box">
    <p>テキストを中央（上下左右真ん中）に配置したい</p>
  </div>
</div>

CSSは

.wrapper {
  height:300px;
  border:10px solid #777;
}
.box {
  text-align:center;
}

こうした場合、

となります。text-align:center;で左右の中央にはきましたが、今回はこれを 上下左右真ん中 にしたいので、CSSにこう記述します。

.wrapper {
  position: relative;
  height:300px;
  border:10px solid #777;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  word-break: keep-all;/*テキストを折り返さないように*/
}

これで、

こうなります。他にも方法はあるでしょうが、こんな方法もあるよ！ということで。

画像を中央（上下左右真ん中）に配置する時

まずこちらもHTML。例えば、

<div class="wrapper">
  <div class="none">
    <p><img src="画像のURL" ></p>
  </div>
</div>

CSSは

.wrapper {
  position: relative;
  height:300px;
  border:10px solid #777;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

これで、

画像も同じく 上下左右真ん中 になります。

ちなみに、ソースはWP独特のクセや、違うcssと干渉しないように、＜p＞タグを足したり等、少々リセットしています。
しかしwpのいらん＜p＞タグとか、たまに邪魔ですよねぇ。。今更全部取る設定するわけにもいかんし。。う〜ん。。