div垂直水平居中

效果图：

HTML

<div class="parent">
    <div class="child">fdfdf</div>
</div>

css

.parent {
    position: relative; 
    /*下面两个属性只是为了展示效果，可不加*/
    height: 300px;
    background: #ccc; 
}
.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

当然你也可以使用弹性布局

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}