常见的div居中对齐方式

Posted 2021-03-15 jlfw

前段时间面试的时候面试题里面对css考察最多的就是div居中对齐的问题，因此特地对div居中对齐的方式做了一个简单的总结，本文的目标就是希望各位在以后根据不同的情况使用不同的居中方式，闲话少说，直接上代码

<div class="wrapper">
    <div class="inner"></div>
</div>

Flex布局实现

.wrapper{
    display: flex;
    width: 500px;
    height: 500px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.wrapper .inner{
    width: 300px;
    height: 300px;
    background-color: #666;
}

父元素display设置为flex,使用flexbox布局，在此布局下的元素就具备了伸缩的特性，再通过justify-content设置元素主轴上的对齐方式center,即可实现水平方向上的对齐，再利用align-items设置侧轴上的对齐方式center,即可实现垂直方向上的对齐

流体特性

 .wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: #666;
}

当一个绝对定位元素，其对立方向属性同时具有数值时，其流体特性就触发了，margin当两侧的值都是auto时会平分剩余空间的大小，因此当四个方向都是auto时就可以实现水平和垂直方向的居中

transform平移

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    background-color: #666;
}

已知宽高绝对定位

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    background-color: #666;
}

以上内容是个人的一点总结，如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏