margin: 0 auto;での中央寄せ。margin-left: auto;での右寄せ。

margin: 0 auto;で真ん中に寄せることができるテクニックは前から知っていたのですが、margin-left: auto;で右に寄せられるテクニック地味に最近知りました。。15年webやってきたのに。。なんだかんだとても便利ですね。

position: absolute;とmargin: auto;

.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 16px;
  margin: auto;
  background-color: #39c;
  width: 70%;
  height: 100px;
  color: #fff;
}

position: absolute;と組み合わせて、left, right, top, bottomの値を0にしてmargin: auto;してあげることで上下左右の中央寄せをすることができます。

position: absolute;とmargin: auto;の応用

.box-img {
  margin: auto 0;
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 30px;
  width: 100px;
  height: 100px;
  background-color: #333;
}

bottom: 30px;として若干ずらしてあげることで、若干ずらした位置に寄せると言うことが可能

negative margin（marginをマイナスの値にする）

box {
   ground-color: #39c;
  width: 70%;
  height: 100px;
  margin-bottom: -20px;
}

marginをマイナスの値にすると隣接するタグを被すようにマイナスのmarginをつけることができます。
たまーにどうしても被るようなレイアウトの場合には使いますが、たくさん使いすぐると混乱を招きがちなのでなるべく使わないようにするのがよいです。

まとめ

margin-left: auto;で右に寄せられるテクニックを最近知ってびっくりしました。。（昔はできなかったはず）
工夫次第でいろいろなことができるのでcssはパズルみたいで面白いですねっ。
日々使えるcssは増えていっているので、キャッチアップしてテクニックを増やしていきたいですね。

最近いいないいなと思ったcss情報
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 | コリス