セルフバックで3万円の臨時収入を手に入れよう!

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

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%);
}