水平垂直居中常见方式总结

Posted 木槿惜年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了水平垂直居中常见方式总结相关的知识,希望对你有一定的参考价值。

水平垂直居中常见方式总结

html结构为:

<div class="parent">
    <div class="child"></div>
</div>

 

(1)父元素相对定位,子元素关键在于设置为绝对定位,margin:auto

.parent{
    width:400px;
    height:400px;
    background:#afa;
    position:relative;
}
.child{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    top:0;
    margin:auto;
    background:yellow;
    width:100px;
    height:100px;
}

(2)父元素相对定位,子元素绝对定位,且设置transform:translate(-50%,-50%)

.parent{
    width:400px;
    height:400px;
    background:#afa;
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:yellow;
    width:100px;
    height:100px;
}

(3)父元素设置为display:flex;justify-content:center;align-items:center

.parent{
    width:400px;
    height:400px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#afa;
}
.child{
    width:100px;
    height:100px;
    background:yellow;
}

 (4)设置父元素display:table-cell;text-align:center;vertical-align:center;子元素:display:inline-block;

.parent{
    display:table-cell;
    width:400px;
    height:400px;
    background:#afa;
    text-align:center;
    vertical-align: middle;
}
.child{
    display:inline-block;
    width:100px;
    height:100px;
    background:yellow;
}

 

                                                 

以上是关于水平垂直居中常见方式总结的主要内容,如果未能解决你的问题,请参考以下文章

CSS垂直水平居中的方式总结

CSS水平垂直居中常见方法总结

CSS水平垂直居中常见方法总结2

css3总结之居中

总结一下各种居中(内联元素块级元素浮动元素绝对定位元素)*(水平垂直)

如何让div垂直居中(23种方法总结)