垂直居中 css实现的4种方法

html结构如下：

<div id="box">
    <span id="main">
        ...
    </span>
</div>

方法1：通过定位，设置子元素top:0，bottom:0，margin:auto自动垂直居中；

核心代码设置如下：

#box{
    position: relative;
}
#main{
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
}

方法2：通过定位，设置子元素top:50%，margin-top:-子元素高度的一半，这里一定设置margin-top一定要加上“-”，让子元素向上再移动自身一半的高度；

核心代码设置如下：

#box{
    position: relative;
}
#main{
    position: absolute;
    top:50%;
    /*假设子元素高200px,实际数值以真实情况而定*/
    margin-top:-100px;
}

方法3：通过定位，设置子元素top:50%，translate向反方向平移子元素高度的一半，让子元素向上再移动自身一半的高度；

核心代码如下：

#box{
    position: relative;
}
#main{
    position: absolute;
    top:50%;
    transform: translate(0,-50%)
}

方法4：通过flex布局，设置容器布局方式为flex布局，竖直方向的轴线（默认交叉轴）对齐方式为居中（center）；

核心代码如下：

#box{
    display: flex;
    align-items: center;
}

ps：此处的我在设置时，主轴方向默认为横向，实际使用时以真实场景做调整，核心思想不变；

 

总结：

在居中元素（子元素）高度固定的场景下，以上四种方法都可行，在居中元素（子元素）高度不固定时，可采用后两种方法，依然可行；

 

以上仅为个人开发过程中总结，不足之处，欢迎指正，也欢迎留言交流