父级高度未知,实现子元素居中

emmmm,使用弹性盒布局就好了哇~~~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .parent {
            display: flex;
            /*justify-content属性定义了子项目在主轴上(X轴)的对齐方式。*/
            justify-content: center;
            /*align-items属性定义子项目在交叉轴(Y轴上)上如何对齐。*/
            align-items: center;
            height: auto;
            width: auto;
        }
        .son1 {
            width: 200px;
            height: 150px;
            background: red;
            /*设置偏移值left、top 和 负的margin使得子元素在父元素中居中*/
        }
        .son2 {
            /*子元素宽高随便设置*/
            width: 200px;
            height: 50px;
            background: lightgoldenrodyellow;
            /*align-self: center;*/
            /*可以不用设置:align-self属性允许单个子项目有与其他子项目不一样的对齐方式,可覆盖父元素的align-items属性。
         * 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
         */
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

</html>


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页