元素开启了绝对定位:
水平布局：
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>
# css # css3
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生