DEMO 1: 绝对定位 实现

.demo {
    background: orange;
    position: relative;
    height: 300px;
}
.demo_div_1 {
    background: #655;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /**
     * transform可改为
     * margin-top -3em;
     * margin-left: -9em;
     * width: 18em;
     * height: 6em;
     * 
     */
}

        

DEMO 2: Flex 实现

.demo_2{
    background: orange;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}
.demo_div_2 {
   background: #655;
}

        

DEMO 3: Flex 实现

.demo_3 {
    background: orange;
    position: relative;
    height: 300px;
}
.demo_div_3 {
    background: #655;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 107px;
}