同一行で中央寄せと右寄せ

やってる人多そうな割に、全然見つからなかったのでメモ。
relativeの親ボックスを作って、absoluteの子ボックスと普通の子ボックスを重ねる方法。
結局ボックスが3つ重なる感じ。
親ボックスをrelativeにしないと重ならない。
文字寄せはtext-alignで指定。

.caption {
  position: relative;
}
.caption .x {
  position: absolute;
  text-align: center;
  width: 100%;
}
.caption .y {
  text-align: right;
}

<div class="caption">
  <div class="x">中央寄せするよ</div>
  <div class="y">右寄せするよ</div>
</div>