CSS实现水平垂直居中的10种方法

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了。要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我会重点讲解比较重要的几种方法，方便大家理解和使用。

方法一：flexbox

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

方法二：grid

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  display: grid;
  place-items: center;
}

方法三：百分比

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  position: relative;
}

.item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法四：绝对定位

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  position: relative;
}

.item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

方法五：transform

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  position: relative;
}

.item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法六：display

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

方法七：table

<table>
  <tr>
    <td>内容</td>
  </tr>
</table>

方法八：margin

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  text-align: center;
}

.item {
  display: inline-block;
  margin: 0 auto;
}

方法九：padding

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  padding: 50px;
}

.item {
  display: inline-block;
}

方法十：水平居中（父元素已知高度）

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  height: 100px;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

以上10种方法，是我整理的比较全面的居中方式，小伙伴们可根据自己的业务需求灵活应用，在实际项目中根据项目需求选择合适的方法。

最后，希望本文对大家有所帮助，如果大家在使用CSS实现水平垂直居中时遇到任何问题，欢迎随时在评论区留言，我会尽力解答。