• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Keine vertikale Zentrierung

Witschi262

Blogger
Guten Abend,

habe ein kleines Loginfenster erstellt:

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>Login</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body class="align">
        <main>
            <div class="login_form">
                <form action="?" method="POST">
                   
                    <div class="form_field">
                        <label for="login_name"></label>
                        <input id="login_name" type="text" name="username" placeholder="Username" required>
                    </div>
                   
                    <div class="form_field">
                        <label for="login_password"></label>
                        <input id="login_password" type="password" name="password" placeholder="Password" required>
                    </div>
                   
                    <div class="form_field">
                        <input type="submit" value="Login">
                    </div>
                </form>
            </div>
        </main>
    </body>
</html>

HTML:
body {
    background-color: #2c3338;
    font-family: Open Sans;
    font-size: 9pt;
    height: 100%;
}

h1, h2, h3, h4, h5, p {
    color: rgba(255, 255, 255, 0.15);
    font-weight: 100;
}

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

main {
    width: 90%;
    max-width: 30rem;
   
    margin-left: auto;
    margin-right: auto;
}

input {
    background-image: none;
    border: 0;
    color: inherit;
    font: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    transition: background-color 0.3s;
}

.login_form form input[type='text'], form input[type='password'], form input[type='submit'], form label {
    padding: 1rem;
}

.login_form form input[type='text'], form input[type='password'] {
    border-radius: 0px 5px 5px 0px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
   
    width: 100%;
}

.login_form form input[type='text']:hover, form input[type='password']:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.login_form form input[type='submit'] {
    width: 100%;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.login_form form input[type='submit']:hover {
    background-color: rgba(0, 0, 0, 0.2);
}


.login_form form label {
    background-color: #363b41;
    border-radius: 5px 0px 0px 5px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
   
}

.form_field {
    display: flex;
    margin: 1rem;
}

Leider wird trotz Flexbox das Loginfeld nur horizontal, nicht vertikal zentriert. Könnt ihr mir helfen?

Grüße
Lucas
 
Werbung:
Dem ersten Regelblock fehlt für height:100% im Selektor das html-Element, um die Viewporthöhe auf 100% zu strecken, damit am Ende die vertikale Zentrierung überhaupt greifen kann:
CSS:
html,body {
    background-color: #2c3338;
    font-family: Open Sans;
    font-size: 9pt;
    height: 100%;
    margin:0; /* weitere Ergänzung */
    padding:0; /* damit keine Scrollbalken erscheinen */
}
 
Zurück
Oben