CSS垂直水平居中的方式

HTML结构

<div class="wrap">
   <div class="center">我要居中</div>
</div>

方法一：绝对定位+margin:auto;

.wrap {
    position: relative;
    width: 250px;
    height: 150px;
    background: pink;
    overflow: hidden;
}
.center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*一定要有宽高*/
    width: 70px;
    height: 50px;
    color: #fff;
    background: deepskyblue;
    margin: auto;
}

方法二：grid布局+justify-content、align-items;

.wrap {
    width: 250px;
    height: 150px;
    background: pink;
    display: grid;
    justify-content: center;
    align-items: center;
}
.center {
    color: #fff;
    background: deepskyblue;
}

方法三：grid布局+margin;

.wrap 
    width: 250px;
    height: 150px;
    background: pink;
    display: grid;
}
.center {
    color: #fff;
    background: deepskyblue;
    margin: auto;
}

方法四：grid布局+justify-items、align-items;

.wrap {
    width: 250px;
    height: 150px;
    background: pink;
    display: grid;
    justify-items: center;
    align-items: center;
}
.center {
    color: #fff;
    background: deepskyblue;
}

方法五：flex布局+justify-content、align-items;

.wrap {
    width: 250px;
    height: 150px;
    background: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center {
    color: #fff;
    background: deepskyblue;
}

方法六：flex布局+margin;

.wrap {
    width: 250px;
    height: 150px;
    background: pink;
    display: flex;
}
.center {
    color: #fff;
    background: deepskyblue;
    margin:auto;
}

方法七：table-cell布局;

.wrap {
    width: 250px;
    height: 150px;
    background: pink;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.center {
    color: #fff;
    background: deepskyblue;
    display: inline-block;
}

方法八：绝对定位+transform;

.wrap {
    position: relative;
    width: 250px;
    height: 150px;
    background: pink;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    background: deepskyblue;
}

方法九：伪元素+line-height;

.wrap {
    width: 250px;
    height: 150px;
    background: pink;
    text-align: center;
}
.wrap::after {
    content: '';
    line-height: 150px;
}
.center {
    color: #fff;
    background: deepskyblue;
    display: inline-block;
}