3

Olá, estou montando uma tela que por enquanto está da seguinte maneira:

inserir a descrição da imagem aqui

Porém, para este "alinhamento vertical" que esta div está, eu estou usando um margin-top com porcentagem para ajudar, mas creio que nao é a maneira certa de se fazer... Já tentei de algumas maneiras, usando classes do bootstrap, alinhar, mas não deu certo. Alguém poderia me dar uma ajuda ?

html {
    height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: linear-gradient(to top right, #a4bcb2, #34b9e9);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card {
    margin-top: 40%;
    border-radius: 15px;
}

#entrar {
    border-radius: 15px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Login</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-3"></div>
            <div class="col-6">

                <div class="card">
                    <article class="card-body">
                        <h4 class="card-title text-center mb-4 mt-1">Login</h4>
                        <hr>
                        <p class="text-success text-center">Insira seus dados para acessar mais informações.</p>
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"> <i class="fa fa-id-card"></i> </span>
                                    </div>
                                    <input name="" class="form-control" placeholder="Número de série" type="text">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                                    </div>
                                    <input name="" class="form-control" placeholder="Usuário" type="text">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                                    </div>
                                    <input class="form-control" placeholder="Senha" type="password">
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-block" id="entrar"> Acessar  </button>
                            </div>
                            <!--<p class="text-center"><a href="#" class="btn">Esqueceu sua senha?</a></p>-->
                        </form>
                    </article>
                </div>

            </div>

            <div class="col-3"></div>
        </div>
    </div>

</body>
</html>

EDIT 1: usando a propriedade flex, dita na resposta do André, ficou da seguinte mandeira: inserir a descrição da imagem aqui

2 Respostas 2

2

Não precisa usar CSS extra o próprio Bootstrap tem classes nativas para isso. Basta colocar h-100 no container e na row, e coloca a classe align-items-center

<div class="container h-100">
<div class="row h-100 align-items-center">

Não mexi em nada no seu CSS, apenas retirei o margin-top que agora não precisa mais!

Veja o código completo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
  html {
    height: 100%;
  }

  body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: linear-gradient(to top right, #a4bcb2, #34b9e9);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .card {
    /* margin-top: 40%; */
    border-radius: 15px;
  }

  #entrar {
    border-radius: 15px;
  }
  </style>
</head>
<body>
  <div class="container h-100">
      <div class="row h-100 align-items-center">
          <div class="col-3"></div>
          <div class="col-6">

              <div class="card">
                  <article class="card-body">
                      <h4 class="card-title text-center mb-4 mt-1">Login</h4>
                      <hr>
                      <p class="text-success text-center">Insira seus dados para acessar mais informações.</p>
                      <form>
                          <div class="form-group">
                              <div class="input-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text"> <i class="fa fa-id-card"></i> </span>
                                  </div>
                                  <input name="" class="form-control" placeholder="Número de série" type="text">
                              </div>
                          </div>

                          <div class="form-group">
                              <div class="input-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                                  </div>
                                  <input name="" class="form-control" placeholder="Usuário" type="text">
                              </div>
                          </div>

                          <div class="form-group">
                              <div class="input-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                                  </div>
                                  <input class="form-control" placeholder="Senha" type="password">
                              </div>
                          </div>

                          <div class="form-group">
                              <button type="submit" class="btn btn-primary btn-block" id="entrar"> Acessar  </button>
                          </div>
                          <!--<p class="text-center"><a href="#" class="btn">Esqueceu sua senha?</a></p>-->
                      </form>
                  </article>
              </div>

          </div>

          <div class="col-3"></div>
      </div>
  </div>

</body>
</html>

6
  • 1
    h100 é height:100% Commented 24/04/2019 às 16:37
  • Opa Hugo, valeu cara, funcionou como o esperado, ficou ótimo. Commented 24/04/2019 às 16:37
  • 1
    @MauroAlmeida isso mesmo 100% !important na verdade
    – hugocsl
    Commented 24/04/2019 às 16:39
  • @SamuelMachado vlw jovem
    – hugocsl
    Commented 24/04/2019 às 16:39
  • 1
    @ThiaguinhoEmbasamento haha o nego aqui é embaçado! é nois 💪
    – hugocsl
    Commented 13/12/2019 às 18:17
2

Você pode usar o flex do html para isso, veja abaixo:

html {
    height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: linear-gradient(to top right, #a4bcb2, #34b9e9);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card {
    width: 50%;
    border-radius: 15px;
}

#entrar {
    border-radius: 15px;
}

.container {
    height:100%;
  	display:flex;
    align-items: center;
    justify-content:center;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Login</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <article class="card-body">
                <h4 class="card-title text-center mb-4 mt-1">Login</h4>
                <hr>
                <p class="text-success text-center">Insira seus dados para acessar mais informações.</p>
                <form>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-id-card"></i> </span>
                            </div>
                            <input name="" class="form-control" placeholder="Número de série" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                            </div>
                            <input name="" class="form-control" placeholder="Usuário" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                            </div>
                            <input class="form-control" placeholder="Senha" type="password">
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block" id="entrar"> Acessar  </button>
                    </div>
                    <!--<p class="text-center"><a href="#" class="btn">Esqueceu sua senha?</a></p>-->
                </form>
            </article>
        </div>
    </div>

</body>
</html>

3
  • Agradeço pela resposta, André. Realmente ele alinhou verticalmente, porém me trouxe um outro conflito... Não entendi exatamente o porque, mas usando o flex, o card ficou extremamente expremido, ficou fino demais, sabe? Se puder me dar mais essa ajuda, agradeço. Commented 24/04/2019 às 16:24
  • Deixei um edit na pergunta para você visualizar melhor Commented 24/04/2019 às 16:26
  • Opa Samuel, você pode simplesmente definir um tamanho para o card, vou modificar a resposta com isso. Commented 24/04/2019 às 16:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .