【CSS】ブロック要素を中央を基準に左(右)にずらす

真ん中を基準に、左または右に要素を配置したかったので調べてみました。

このブロック要素を動かすとします。

<div class="block">BLOCK</div>

positionを使う

一度中央に寄せた要素をposition:relative;で基準位置を真ん中にしてから移動させる。

/****** 要素に青い背景と白文字の装飾しています ******/
.block {
  height: 50px;
  width: 100px;
  background-color: blue;
  color: white;
  margin: 0 auto; /* 中央に配置 */
  position: relative; /* 現在の位置を基準にする */
  left: 100px; /* 右に100px移動 */
}

transformを使う

CSSの関数。変形とか回転ができる。translateXで横軸移動を指定。

/****** 要素に青い背景と白文字の装飾しています ******/
.block {
  height: 50px;
  width: 100px;
  background-color: blue;
  color: white;
  margin: 0 auto; /* 中央に配置 */
  transform: translateX(100px); /* 右に100px移動 */
}

flexboxなら

親要素でdisplay:flex;とjustify-content:center;が指定されていればmarginの指定でも可能。
ただし、要素を移動させるtransform、positionと違い、marginは要素の余白を追加するというプロパティなので、margin-left: 100px;と指定しても100px移動するわけではないので注意。

また、flexboxで中央指定してあるとき、transformとpositionも利用可能。

まとめ

flexboxを使用せず縦並びなどの時に使えます。