【position】上下左右中央に配置するときに良く使用するcssプロパティ

2021年4月21日

cssで画像の上に文字を重ねたり、ロゴを重ねたりする時に使用する「position」
このpositionで上下左右中央に配置したり、上下中央に配置したりする方法をまとめておきます。

共通するHTMLとcss

今回はグレー背景に対して「こんにちは」をpositionで配置していきます。

HTML

<div class="wrap">
  <div class="position">
    <p>こんにちは</p>
  </div>
</div>

css


.wrap{
  position: relative;
  width:350px;
  height:350px;
  background-color: #aaaaaa;
}
.position{
  position: absolute;
}

上下左右で中央に配置

css

.position{
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

上下（縦方向）で中央に配置

Y軸

css

.position{
  top: 50%;
  left: 0;/* 自分の好きな数値 */
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

左右（横方向）で中央に配置

X軸

css

.position{
  top: 0;/* 自分の好きな数値 */
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}