transformで中央,右寄せ,左寄せにする方法

中央寄せ

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

中央右寄せ

.element {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

• 要素をページの右端に配置
• 要素を垂直方向に中央に配置
• top: 50% で要素の上端がページの中央になるように設定
• transform: translate(0, -50%) で要素の高さの半分を上に移動し、垂直方向に中央に配置します。
• right: 0 で要素を右端に寄せる

中央左寄せ

.element {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

leftも同様。