前端笔记(总结几种水平垂直居中的方式)

基本是网上看来的,前2种用的较多,第三种是有点黑科技的写法

如果只是水平居中,就可以直接使用margin:0 auto;

<div class="d1_1">
    <div class="d2_1"></div>
</div>

 

第一种:使用translate

属于transform的一个方法,将div进行百分比xy轴位移

.d1_1{
    width: 200px;
    height: 200px;
    background-color: red;
}
.d2_1{
    width: 100px;
    height: 100px;
    background: blue;
    transform: translate(50%,50%);/*位移*/
}

当然,最好使用相对定位加绝对定位先,为了不影响其他元素排列

 

第二种:使用弹性布局flex

大多数用这种方式,设置容器的属性即可,不过要注意浏览器兼容

.d3{
    width: 200px;
    height: 200px;
    background-color: red;
    display: flex;
    align-items: center;/*垂直居中*/
    justify-content: center;/*水平居中*/
}
.d4{
    width: 100px;
    height: 100px;
    background: blue;
}

 

第三种:这种是黑科技,使用vertical-align

不建议多用也比较麻烦,用到了水平居中、变为行内元素,居中

.d5{
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
}
.d5::after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.d6{
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}

 

posted @ 2020-04-26 12:30  herry菌  阅读(185)  评论(0编辑  收藏