Vertically align login page and horizontally align text

[corenhance]

Hi there,

I need to know that how can I vertically middle align my login page content and also horizontally center align the forgot password link in the login page.

Thank You

website : https://www.corenhance.store/account/login

password : cn@2025 

[Moeed]

Hey @corenhance 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
main#MainContent {
    align-content: center !important;
}
form#customer_login {
    place-items: center !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[corenhance]

Hi @Moeed, Thanks but it didn't made the text to the center.

[Dan-From-Ryviu · Accepted solution]

Hi @corenhance 

Please add this code to theme.liquid file in Online Store > Themes > Edit code

<style>
#MainContent:has(.login) {
    display: flex;
    align-items: center;
    justify-content: center;
}
#MainContent:has(.login) .login a {
    width: auto;
}
</style>

[corenhance]

Hi @Dan-From-Ryviu,

Thank You so much. It really worked.

[Dan-From-Ryviu]

You are very welcome! 

[EstherBui]

Hi @corenhance, thanks for reaching out. 

To address the issue, please help me go to your Theme => Online store => Customize => Theme settings => Custom CSS and insert the following custom code:

form#customer_login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

You can take a look at the expected result here: 

I hope my solution is helpful to you, and please feel free to feedback. 

Esther 

[corenhance]

Hi @EstherBui, Thank You for your help. But I've already got the solution.