元素垂直居中的几种方法

1.使用css中的margin:auto 配合position

html代码：

<div class="container">
   <div class="div1"><span class="span1"></span></div>
</div>

css代码：

.div1 {
        width: 400px;
        height: 400px;
        position: relative;
        border: 1px solid #465468;
}
.span1 {
        width: 100px;
        height: 50px;
        background-color: red;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}

2.使用margin 负值法/translate移动，配合position

<div class="container">
  <div class="div2"><span class="span2"></span></div>
</div>

css代码：

.div2 {
        width: 500px;
        height: 400px;
        border: 2px solid #379;
        position: relative;
}
.span2 {
        width: 180px;
        height: 80px;
        background-color: #746;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* margin-top: -40px; */ /*height 的一半*/
        /* margin-left: -90px;*/ /*width 的一半*/
}

3.使用flex来处理

<div class="container">
  <div class="div3"><span class="span3"></span></div>
</div>

css代码：

.div3 {
        width: 300px;
        height: 200px;
        border: 3px solid #546461;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
}

4.父元素设置:grid栅格布局,align-content: center;justify-content: center; 居中展示

<div class="container">
  <div class="div4"><span class="span4"></span></div>
</div>

css代码：

.div4{
     display: grid;
     align-content: center;
     justify-content: center;
}
.span4{
     background-color: powderblue;
}

5.父元素设置:grid栅格布局,子元素 align-self: center; justify-self: center; 居中展示

<div class="container">
  <div class="div5"><span class="span5"></span></div>
</div>

css代码:

.div5{
        display: grid;
}
.span5{
        align-self: center;
        justify-self: center;
}