element UI中el-row垂直居中
2021-04-26 16:16:24
603次阅读
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 回答
  • 0 粉丝
  • 0 关注