垂直居中的几种优雅实现方式

 费德  2018/05/20 15:57  247 次
<div class="wp">
  <div class="box">我是小三</div>
</div>

一、定宽高

先定义页面结构和基础的css


.wrapper {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    background: green;
    width: 100px;
    height: 100px;    
}

1.absolute + 负margin

先将box的左上角对准外面div的正中心,这时候再往左上角偏移box的一半就可以达到垂直居中的效果

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

2.absolute + margin

.wrapper {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

3.absoulte + calc

.wrapper {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

二、居中元素不定宽高适用

1、absolute + transform

.wrapper {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2、flex

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

 作者:费德

少年费德的奇幻漂流

本博客如无特殊说明皆为原创,转载请注明来源:垂直居中的几种优雅实现方式

添加新评论