Center an element with css

Asked

Viewed 72 times

-2

I’m trying to make a pop-up with a login screen, however the div of class="form-login-div" is not being automatically centralized at all.

Any idea? CSS:

.form-login-div-parent{
  width: 100vw;
  position: relative;
  bottom:0;
}
.form-login-div {
  width: 35rem;
  height:auto;
  position:absolute;
  z-index:1;
  border-radius:0.5rem;
  padding:1rem;
  background-color:#0374D6;
}  

.home-container{
    width:30rem;
    z-index: 1;
    position: relative;
    border-radius: 5px;
}

HTML:

 <div class="home-container">
    <div class="form-login-div-parent">
      <div class="form-login-div">
        <form action="" method="post">
          <div class="form-group">
            <label>Endereço de e-mail</label>
            <input type="email" class="form-control" name="email" placeholder="Insira o seu e-mail">
          </div>
          <div class="form-group">
            <label>Senha</label>
            <input type="password" class="form-control" name="senha" placeholder="Insira a sua senha">
          </div>
          <div>
            <div style="text-align: left;">
              {% if view_bag["erro"] == true %}
            <p style="color: rgb(240, 47, 47); ">{{ view_bag["mensagem"] }}</p>
            {% endif %}
            </div>
            <div style="text-align: right;">
              <button type="submit">Entrar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <picture>
      <source class="imagem-fundo" media="(max-width: 1140px )" srcset="/static/img/imagemestudante-smartphones-blur.png"
        type="image/png">
      <img class="imagem-fundo" src="/static/img/imagemestudante-full.jpg" alt="Foto de estudantes ao fundo">
    </picture>
  </div>
html css html5 css3

  • related https://answall.com/questions/58614/centralizar-horizontally. and https://answall.com/questions/33495/como-centralizar-uma-div-com-positionfixed gives a search on the site has many questions about it

  • I researched the "similar questions" but did not find

2 answers

-1


I don’t quite understand, where are you sending centralize this div?

There in the .form-login-div, adds these 2 lines:

margin-left: 50%;
transform: translateX(-50%);

I don’t know if that’s all you need.

  • In this particular code I’ve erased all attempts, but I’ll try your way!

  • I have never tried or heard of this Form, thank you! It worked!

-2

Hello! You can use display: flex and justify-content: center in the .form-login-div-parent to center horizontally.

If you want vertically add the align-items: center, and force the height of the Parent to 100vh with a height: 100vh.

I made a quick example: https://codepen.io/paulofdaniel/pen/abJjpqq

Hug!

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.