CSS学习（2）居中方式总结前言如何让一个div水平垂直居中盒子居中水平方向居中水平方向居中很简单，有两种常见的

前言

如何让一个div水平垂直居中

盒子居中

水平方向居中

水平方向居中很简单，有两种常见的方式

设置盒子margin: 0 auto：这种居中方式的原理在于设置margin-left为auto时，margin-left就会被设置为能有多大就多大，所以盒子会跑到最右边，而设置margin-right为auto时，同理盒子就会跑到最左边。所以，当我们设置左右的margin都是auto的时候，盒子就跑到了中间，从而形成了水平居中。
第二种常见的方式就是通过display: flex设置盒子的外层盒子是一个弹性盒，然后通过justify-content: center使得内部的盒子居中。

垂直方向居中

垂直方向居中方法有很多，这里介绍几种：

通过verticle-align: middle实现垂直居中通过vertical-align: middle实现垂直居中是早期常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display: inline-block。并且在使用vertical-align: middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

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

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  position: relative;
}
.item {
  width: 50px;
  height: 50px;
  background-color: blue;
  vertical-align: middle;
  display: inline-block;
}
.brotherBox {
  height: 100%;
  background-color: green;
  vertical-align: middle;
  display: inline-block;
}

通过伪元素实现垂直居中

平白无故添加一个无意义的参考元素不怎么好，我们可以去除作为参考的兄弟元素，转为给父元素添加一个伪元素，如下：

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

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  position: relative;
}
.container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.item {
  width: 50px;
  height: 50px;
  background-color: blue;
  vertical-align: middle;
  display: inline-block;
}

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

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

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  position: relative;
}
.item {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  
  margin-left: -25px;
  margin-top: -25px;
}

通过transform实现垂直居中可以通过定位配合transform也可以实现垂直居中

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

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  position: relative;
}
.item {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
 
  transform: translateX(-50%) translateY(-50%);
}

使用弹性盒子居中(工作中最常用) 通过设置父元素为弹性盒子，然后使用justify-content:center和align-items:center来设置内部盒子水平垂直居中。

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

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item {
  width: 50px;
  height: 50px;
  background-color: blue;
}

总结

如何让一个div水平垂直居中

1.通过verticle-align:middle实现垂直居中

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

3.通过绝对定位实现垂直居中

4.通过transform实现垂直居中

5.使用弹性盒子居中