CSS中position的百分比表示法及绝对定位居中

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wayne0902/article/details/51726841

设置了定位position: absolute的盒子,将top设为0%,盒子顶部将会紧挨着父元素(已定位)的顶部,若设为100%,则盒子顶部将会紧挨着父元素底部。
计算公式为:top_percent = 子盒子顶部距父盒子顶部的距离 / 父盒子高度

由此可以理解:

.element {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;/*盒子宽度的一半*/
    margin-top: -50px;/*盒子高度的一半*/
}

这个代码为什么可以实现子元素在父元素中的绝对居中,但是该方法需要提前知道元素的尺寸,耦合性太强。

有个绝对定位居中更好的办法:

.element {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;/*这行代码是关键*/
}

另外,对于background-position中的position值,则有点特殊,top: 0%时与上述相同,但是设置为100%时是盒子底部与父元素底部挨着。
计算公式为:top_percent = 子盒子顶部距父盒子顶部的距离 / (父盒子高度-子盒子高度)
这点需要注意。

展开阅读全文

没有更多推荐了,返回首页