div居中方式有哪些？

水平居中

• 通过margin:0 auto来实现
• 通过设置display:flex变为弹性盒，再设置justify-content:center来实现水平居中

---

垂直水平居中

• 通过 vertical-align:middle 实现垂直居中，注意vertical-align生效的前提是该元素display:inline-block，并且在使用 vertical-align:middle 的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点

// html
<div class="container">
  <div class="item"></div>
  <div class="brotherBox"></div>
</div>

// css
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  text-align: center;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
}
.brotherBox{
  height: 100%;
  /* width: 2px; */
  background: red;
  display: inline-block;
  vertical-align: middle;
}

• 通过父元素设置伪元素 :before ，然后设置子元素 verticle-align:middle 实现垂直居中

// html
<div class="container">
  <div class="item"></div>
</div>

// css
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  text-align: center;
}
.container::before{
  content : '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
}

• 通过绝对定位实现垂直居中，这种方式需要设置父元素为相对定位，子元素为绝对定位，然后配合 margin-left 为负的盒子高度一半来实现垂直居中

// html
<div class="container">
  <div class="item"></div>
</div>

// css
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  position: relative;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

• 通过 transform 实现垂直居中

// html
<div class="container">
  <div class="item"></div>
</div>

// css
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  position: relative;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50px) translateY(-50px);
}

• 使用弹性盒子居中

// html
<div class="container">
  <div class="item"></div>
</div>

// css
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
}