CSS之绝对定位的位置以及子元素在父容器的居中显示

最新推荐文章于 2023-04-12 09:25:24 发布

极客研究者

最新推荐文章于 2023-04-12 09:25:24 发布

阅读量1.9k

点赞数

分类专栏： CSS样式表文章标签： css 定位 css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105573724

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

元素开启了绝对定位:
水平布局：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
=包含块的宽度

此时规则和之前一样,只是多了left和right这两个值
当发生过度约束:
如果9个值没有auto,则自动调整right值以使等式成立
如果有auto,则自动调整auto值以使等式成立

可设置auto的值：
margin width left right

垂直方向布局也必须满足等式：
topt+margin-top+border-top+padding-top+height+padding-bottom+border-bottom++margin-bottom+bottom
=包含块的高度

通过以上规则,可以实现使得子元素在父容器中居中显示(水平方向和垂直方向)``

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位元素的位置</title>
    <style>
        .box1{
            width:500px;
            height:500px;
            background-color:#bfa;

            /* 父元素开启相对定位 */
            position: relative;
        }

        .box2{
            width:100px;
            height:100px;
            background-color:orange;

            /*设置水平居中显示 */
            /* margin-left:auto;
            margin-right:auto;  */

            /* 设置垂直方向垂直居中显示 */
            /* margin-top:auto;
            margin-bottom:auto; */


            /* 设置水平方向和垂直方向居中显示 */
            margin: auto;

            /* 开启绝对定位 */
            position: absolute;
            /* 
            left和right的默认值为auto,所以如果不设置这两个值
            则等式不满足时,会自动调整这两个值(必须设置)           
            */
            /* (水平方向)将子元素置父元素左上角处 */

            left:0;
            right:0;


            top:0;
            bottom:0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>