element UI中el-row垂直居中

2021-04-26 16:16:24

1009次阅读

0个评论

<body>
    <el-container class="outer" id="app">
        <el-main>
            <el-row type="flex" justify="center" align="middle">
                <div style="background-color: blue;width: 100px;height: 100px;color: #fff;">A</div>
                <div style="background-color: red;width: 100px;height: 100px;color: #fff">B</div>
            </el-row>
        </el-main>
    </el-container>
</body>
<style>
    body, html{
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }
    .el-main {
        height: 100%;
    }
    .el-row {
        height: 100%; # 这里
    }
    .outer {
        background-color: #DCDFE6;
        height: 100%;
        width: 100%;
    }
</style>

效果：

收藏0赞0

请登录后评论。没有帐号？注册一个。

程序王

0回答
1粉丝
0关注