高さが変わる要素を天地中央揃え

ダイアログの様な中身によって高さが変わる要素を、CSSで画面中央に配置する。
transformプロパティのtlanslateを%単位で指定すると、その要素の幅・高さが基準となるので、-50%を指定することにより要素の基準点を中心に変えている。

.dialog__wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  min-width: 160px;
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

See the Pen dialog centering by Haruumi Kondo (@hal9188) on CodePen.