How to center a logo in a login form?

Question

I have a login form and would like to center the logo the same way the "signin" text is centered.

In fact, the logo always remains at the top left. I don't understand why the logo is not centered? If you have a solution to propose I am very very interested.

I would also like to understand the technique to make this logo responsive, please.

Thank you for your answer.

.parent {
    position: absolute;
    top: 10%;
    left: 15%;
}

.wrapper {
    position: relative;
    width: 70vw;
    height: 80vh;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #79df4a, #8673A1);
    z-index: 6;
    transform: translateX(100%);
    transition: 1s ease-in-out;
}

.logo img {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 75px;
}

.signin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 5;
}

form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40%;
    min-width: 238px;
    padding: 0 10px;
}

form.sign-in-form {
    opacity: 1;
    transition: 0.5s ease-in-out;
    transition-delay: 1s;
}

.title {
    font-size: 35px;
    color: #8673A1;
    margin-bottom: 10px;
}

.panels-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 35%;
    min-width: 238px;
    padding: 0 10px;
    text-align: center;
    z-index: 6;
}

.left-panel {
    pointer-events: none;
}

.content {
    color: #fff;
    transition: 1.1s ease-in-out;
    transition-delay: 0.5s;
}

.left-panel .content {
    transform: translateX(-200%);
}

.right-panel .content {
    transform: translateX(0);
}

.signin_item_block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40%;
    min-width: 238px;
    padding: 0 10px;
}

.signin_item_block.sign-in-block-form {
    opacity: 0;
    transition: 0.5s ease-in-out;
    transition-delay: 1s;
}


/*Responsive*/

@media (max-width:779px) {
    .wrapper {
        width: 100vw;
        height: 100vh;
        background-color: red;
    }
}

@media (max-width:635px) {
    .wrapper::before {
        display: none;
    }
    form {
        width: 80%;
    }
    .signin_item_block.sign-in-block-form {
        display: none;
    }
    .wrapper.sign-up-mode2 form.sign-in-block-form {
        display: flex;
        opacity: 1;
    }
    .wrapper.sign-up-mode2 form.sign-in-form {
        display: none;
    }
    .panels-wrapper {
        display: none;
    }
}

@media (max-width:320px) {
    form {
        width: 90%;
    }
}

<!doctype html>
<html lang="fr">
   <head>
      <meta charset="utf-8">
      <title>Titre de la page</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
   </head>
   <body>
      <div class="parent">
         <div class="wrapper">
            <div class="logo">
               <img src="https://zupimages.net/up/23/02/0itb.png" alt="image">
            </div>
            <div class="signin">
               <form (ngSubmit)="logon()" class="sign-in-form">
                  <!-- Signin -->
                  <h3 class="title">Signin</h3>
               </form>
               <div class="signin_item_block sign-in-block-form"></div>
            </div>
            <div class="panels-wrapper">
               <div class="panel left-panel"></div>
               <div class="panel right-panel">
                  <div class="content">
                     ...
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

You've got a lot of position:absolute in your css. Is this necessary? It's difficult to make these elments responsive as they're taken ouf of the normal rendering flow. — Adam, Jan 11 '23 at 17:31

GMAC · Accepted Answer · 2023-01-11T17:55:19.040

Working: https://stackblitz.com/edit/js-ndbzyq?file=style.css

Firstly, The code was a bit untidy and a lot of unnecessary CSS was used example position: absolute.

The major changes involve are:

moving the logo div inside the signin div.
Changing the flex-direction to column to signing div.
using display flex for logo class which allows me to justify-content centre.

<div class="signin">
  <div class="logo">
    <img src="https://zupimages.net/up/23/02/0itb.png" alt="image" />
  </div>

  <div>
    <form (ngSubmit)="logon()" class="sign-in-form">
      <h3 class="title">Signin</h3>
    </form>
  </div>
  <div class="signin_item_block sign-in-block-form"></div>
</div>

.logo {
  justify-content: center;
  display: flex;
  width: 50%;
  min-width: 238px;
}

.signin {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  z-index: 5;
  flex-direction: column;
}

To be fair, I suggest to re-write the whole structure of the HTML. Use Flex or Grid to achieve similarly and avoid position absolute in this case.

How to center a logo in a login form?

1 Answers1