flex + margin: auto

父节点使用 display: flex, 子节点使用 margin: auto

<style>
  .flex {
    display: flex;
    width: 300px;
    height: 300px;
    background: #ccc;
    margin-bottom: 5px;
  }
  .flex p {
    margin: auto;
  }
</style>
<div class="flex">
  <p>content</p>
</div>

flex 结合 justify-content、align-items

<style>
  .flex2 {
    display: flex;
    width: 300px;
    height: 300px;
    background: #ccc;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
  }
</style>
<div class="flex2">
  <p>content</p>
</div>

绝对定位 + 相对定位

<style>
  .position {
    position: relative;
    width: 300px;
    height: 300px;
    background: #ccc;
  }
  .position p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
</style>
<div class="position">
  <p>content</p>
</div>