1.绝对定位

在要垂直居中的父元素中使用相对定位: position: relative 后,在垂直居中的元素中使用绝对定位:position: absolute,并指定距顶部的高度:  top: 50% 。如此之后,由于本元素还有一定的高度,所以还得再向上移动一半的高度。可用: transform: translaleY(-50%)

<style>
    father{
        height: 100%;
        width: 100%;
        position: relative;
    }
    children{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
</style>

2.flex

flex是目前来说,使用最为方便的方法。只需申明 display:flex   ,就可以直接设置。

<style>
    father{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  
</style>