如何将两个元素居中对齐？

<div style="display: flex; justify-content: center; align-items: center;">
  <div>元素1</div>
  <div>元素2</div>
</div>

<div style="display: grid; place-items: center;">
  <div>元素1</div>
  <div>元素2</div>
</div>

<div style="position: relative;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">元素1</div>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">元素2</div>
</div>