How to center form using flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="background">
        <div class="shape"></div>
        <div class="shape"></div>
    </div>

    <form action="#">
        <h1>Login Here</h1>

        <label for="">Username</label>
        <input type="text" placeholder="Email or Phone">

        <label for="">Password</label>
        <input type="text" placeholder="Password">

        <button>Log In</button>

        <div class="social">
            <div class="go"><i class="fab fa-google"></i>Google</div>
            <div class="fb"><i class="fab fa-facebook"></i>Facebook</div>
        </div>
    </form>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #080710;
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
}

.background {
    height: 520px;
    width: 430px;
    /* background-color: aqua; */
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.background .shape {
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}

.shape:first-child {
    background: linear-gradient(
        #1845ad,
        #23a2f6
    );
    left: -80px;
    top: -80px;
}

.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f,
        #f09819
    );
    right: -30px;
    bottom: -80px;
}

h1 {
    /* text-align: center; */
    font-weight: 400;
}

form {
    height: 500px;
    width: 400px;
    background-color: rgba(255,255,255,0.13);
    border: 1px solid #3E3D44;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

form * {
    font-family: 'Poppins', sans-serif;
    color: #E1E1E1;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}

label {
    /* text-align: left; */
    /* display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column; */
    font-size: 16px;
    font-weight: 500;
    margin: 20px 20px 15px 20px;
    padding: 0 20px;
    /* border: 1px solid white; */
}

input {
    margin: 0 40px;
    padding: 12px 25px;
    width: 80%;
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
    font-size: 14px;
    font-weight: 600;
    background-color: #37373E;
    border-radius: 3px;
}

button {
    margin: 40px 40px 20px 40px;
    padding: 15px 20px;
    color: #080710;
    width: 80%;
    font-size: 16px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    
}

.go {
    border: 1px solid #626167;
    border-radius: 3px;
    padding: 5px 25px;
    background-color: #626167;
    margin-right: 10px;
}

.fb {
    border: 1px solid #626167;
    border-radius: 3px;
    padding: 5px 25px;
    background-color: #626167;
    margin-left: 10px;
}

i {
    margin-right: 7px;
}

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like

To center any component in HTML we need two components.
Parent component and child component.

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

Apply these properties to the parent component and the child component will be centered.

Please read this for a better understanding.
https://www.w3schools.com/css/css3_flexbox.asp

1 Like

I have used display flex to position label, input, button elements inside the form, but I want to center form in middle of the screen using flexbox properties instead of these below properties:-

position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;

when i am entering these properties
{display: flex;
justify-content: center;
align-items: center;}
in body, this is happening it’s not coming in center

please look into this, I have described below my issue

i copied your code into a codepen and the result looks pretty centered to me.
How are you determining that it is not centered?
(it seems centered both horizonally and vertically https://cdpn.io/pen/debug/ExpKdNJ?authentication_hash=jVkpoNxbLPEA

1 Like

In the above code, I have centered it using these properties
{position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;}

but I want to center it using flexbox. Help me in that please.

Okay I see.
Here’s the codepen again but this time using flex layout centering

I had to debug the body’s layout (it was not taking up the entire viewport width and height, so I fixed that first and the rest was straightforward)

Edit: to get rid of the scrollbars, you can use overflow property (hidden) or you can debug some more to find out why the layout is too big for the screen.

1 Like

Thank you so much :pray: literally it got fixed now. Loved it. Feeling glad :innocent: and proud I asked question here.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.