如何让子元素在父元素中上下左右居中

定位 + 拉取 (子元素固定大小)
子元素大小更改 拉取值也需要改

        /* 可以做到,但是box2需要固定大小 */
    #box1{ width:300px; height: 300px; border:1px black solid; position: relative;}
    #box2{ width:100px; height:100px; background:red; position: absolute;
        left:50%; top:50%; margin:-50px;}

margin:auto+ position的上下左右0
margin:auto必须加

 #box1{ width:300px; height: 300px; border:1px black solid; position: relative;}
    #box2{ width:200px; height:100px; background:red; margin:auto;
        position: absolute; left:0; right:0; top:0; bottom:0;
    }

定位+位移50%
translate的百分比是按照box2来计算的
这种模式适合box2不是固定大小的情况。

 #box1{ width:300px; height: 300px; border:1px black solid; position: relative;}
    #box2{ width:200px; height:100px; background:red; position: absolute;
        left:50%; top:50%; transform: translate(-50%,-50%);
    }

flex弹性

 /* 在弹性盒子中,margin:auto;会让上下左右都生效。 */

    #box1{ width:300px; height: 300px; border:1px black solid; display: flex;}
    #box2{ width:200px; height:100px; background:red; margin:auto; }

上面所有样式的布局

<body>
    <div id="box1">
        <div id="box2">div>
    div>
body>

你可能感兴趣的:(笔记)