CODEWITHSUNDEEP
css
Aurora
Aurora

Reputation: 47

Cannot center card component (element) when using Element

1. Use technology (product)

HTML5,Vue,Element

2. Problem description

PictureAs shown, the main card cannot be centered

3. Expected results (problems expected to be solved)

Make <div id="app"><el-card class="box-card" style="width:480px;margin:auto;"> vertical center

4. Reference materials

Element related documents

5. Solutions that have been tried (failed)

（1）

#app{
display:flex;
justify-content: center;
align-items: center;
}

（2）

#app{
position:relative;
.box-card{
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;
    margin: auto;
    }
}

6. Code (front-end HTML)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Login - Unified authentication for Lime Network users</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.staticfile.org/element-ui/2.13.2/index.js"></script>
        <script src="https://cdn.staticfile.org/element-ui/2.13.2/locale/en.min.js"></script>
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.2/theme-chalk/index.css">
    </head>
    
    <body>
        <div id="app">
            <el-card class="box-card" style="width:480px;margin:auto;">
                <p style="text-align:center">Login - Unified authentication for Lime Network users</p>
                <el-form ref="form" :model="form" status-icon :rules="rules" label-position="left" label-width="auto">
                    <el-form-item label="Username" prop="username">
                        <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>
                    <el-form-item label="Password" prop="password">
                        <el-input v-model="form.password" prefix-icon="el-icon-lock" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="Remember me">
                        <el-switch v-model="form.remember"></el-switch>
                    </el-form-item>
                    <el-form-item label="Other ways">
                        <el-button type="text" @click="oauth_github()">GitHub</el-button>
                        <el-button type="text" @click="oauth_gitee()">Gitee</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('form')">Login</el-button>
                        <el-button @click="resetForm('form')">Reset</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <script>
        Script part omitted
        </script>
    </body>

</html>

Upvotes: 1

Views: 2280

Answers (1)

Aurora
Aurora

Reputation: 47

The problem has been solved

body {
        margin: 0px;
    }
    #app {
        position: relative;
        width: 100%;
        height: 100vh;
        display:flex;
        justify-content: center;
        align-items: center;
    }

Upvotes: 1

Related Questions