3

necesito central el contenido de mi web, pero quiero que sea automatico y no definirle los pixeles al margen, para evitar que alguien con un monitor más pequeño o más grande lo vea de manera diferente.

Mi web es la siguiente :

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  /* user-select: none; */
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
}
body{
  display: inline;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.content{
  margin: 0 auto;
  width: 330px;
  padding: 30px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
}
.content .text{
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}
.field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: 25px;
}
.field:nth-child(2){
  margin-top: 20px;
}
.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
              inset -5px -5px 10px #ffffff73;
}
.field input:focus{
  box-shadow: inset 1px 1px 2px #BABECC,
              inset -1px -1px 2px #ffffff73;
}
.field span{
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 50px;
}
.field label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}
.field input:valid ~ label{
  opacity: 0;
}
.forgot-pass{
  text-align: left;
  margin: 10px 0 10px 5px;
}
.forgot-pass a{
  font-size: 16px;
  color: #3498db;
  text-decoration: none;
}
.forgot-pass:hover a{
  text-decoration: underline;
}
button{
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #dde1e7;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #595959;
  box-shadow: 2px 2px 5px #BABECC,
             -5px -5px 10px #ffffff73;
}
button:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.sign-up{
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}
.sign-up a{
  color: #3498db;
  text-decoration: none;
}
.sign-up a:hover{
  text-decoration: underline;
}

.volver-atras{
  padding-left: 23px;
  display: flex;
  width: 70px;
  align-items: center;
  margin: 30px auto;
}
<!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">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="code.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="content">
      <div class="text">Modo Invitado</div>
<form action="#">
        <div class="field">
          <input type="text" required>
          <span class="fas fa-user"></span>
          <label>Nombre de Usuario</label>
        </div>
        <button>Iniciar Sesion</button>
  </form>
    </div>
    <button class="volver-atras">
      <i data-feather="corner-up-left"></i>
      </button>
</body>
<script>
  feather.replace();
</script>
</html>

He conseguido alinearlo al centro horizontalmente, pero quiero centrarlo también verticalmente. He intentado simplemente modificar el .content margin 0, subiendo pixeles y obviamente se cambia, pero no quiero tener que definirle esos pixeles a mano. Probé a cambiar el display del body a grid, pero me deja mucho espacio entre el volver atras y el contenido, queda algo así:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  /* user-select: none; */
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.content{
  width: 330px;
  padding: 30px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
}
.content .text{
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}
.field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: 25px;
}
.field:nth-child(2){
  margin-top: 20px;
}
.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
              inset -5px -5px 10px #ffffff73;
}
.field input:focus{
  box-shadow: inset 1px 1px 2px #BABECC,
              inset -1px -1px 2px #ffffff73;
}
.field span{
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 50px;
}
.field label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}
.field input:valid ~ label{
  opacity: 0;
}
.forgot-pass{
  text-align: left;
  margin: 10px 0 10px 5px;
}
.forgot-pass a{
  font-size: 16px;
  color: #3498db;
  text-decoration: none;
}
.forgot-pass:hover a{
  text-decoration: underline;
}
button{
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #dde1e7;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #595959;
  box-shadow: 2px 2px 5px #BABECC,
             -5px -5px 10px #ffffff73;
}
button:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.sign-up{
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}
.sign-up a{
  color: #3498db;
  text-decoration: none;
}
.sign-up a:hover{
  text-decoration: underline;
}

.volver-atras{
  padding-left: 23px;
  display: flex;
  width: 70px;
  align-items: center;
  margin: 30px auto;
}
<!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">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="code.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="content">
      <div class="text">Modo Invitado</div>
<form action="#">
        <div class="field">
          <input type="text" required>
          <span class="fas fa-user"></span>
          <label>Nombre de Usuario</label>
        </div>
        <button>Iniciar Sesion</button>
  </form>
    </div>
    <button class="volver-atras">
      <i data-feather="corner-up-left"></i>
      </button>
</body>
<script>
  feather.replace();
</script>
</html>

Para apreciar la diferencia ejecutar el codigo en pantalla completa. Gracias de antemano

2 respuestas 2

2

Arreglemos un poco tu código. No es recomendable posicionar el elemento a través de la etiqueta body, ya que si tienes más elementos en tu página, también les afectaría:

html, body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}

Borramos todo esto y dejemos solo el background, que sería justo lo necesario para el body:

body { background: #dde1e7; }

Ahora para centrar tu login y botón, como buenas prácticas, hay que crear un div padre que encierre a estos dos elementos, llamado contenido:

<div class="contenido">
  <div class="content">
    <!-- todo tu login -->
  </div>
  <button class="volver-atras">
    <!-- tu botón -->
  </button>
</div>

Luego centramos al contenido (que encierra al login y al botón) con las siguientes propiedades:

.contenido {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Aquí solo hago que los elementos sean flexibles, estén alineados en columnas, tenga una altura de 100vh, y en esa altura, los elementos se alinearán al centro con align-items: center y también justificados al centro con justify-content: center; (más formas de centrar un div).


Código completo:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

* {
  margin: 0;
  padding: 0;
  /* user-select: none; */
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #dde1e7;
}

.contenido {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content {
  width: 330px;
  padding: 30px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: -3px -3px 7px #ffffff73,
    2px 2px 5px rgba(94,104,121,0.288);
  display: grid;
  place-items: center;
}

.content .text {
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}

.field {
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: 25px;
}

.field:nth-child(2)  {
  margin-top: 20px;
}

.field input {
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
    inset -5px -5px 10px #ffffff73;
}

.field input:focus {
  box-shadow: inset 1px 1px 2px #BABECC,
    inset -1px -1px 2px #ffffff73;
}

.field span {
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 50px;
}

.field label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}

.field input:valid ~ label {
  opacity: 0;
}

.forgot-pass {
  text-align: left;
  margin: 10px 0 10px 5px;
}

.forgot-pass a {
  font-size: 16px;
  color: #3498db;
  text-decoration: none;
}

.forgot-pass:hover a {
  text-decoration: underline;
}

button {
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #dde1e7;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #595959;
  box-shadow: 2px 2px 5px #BABECC,
    -5px -5px 10px #ffffff73;
}

button:focus {
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
    inset -5px -5px 10px #ffffff73;
}

.sign-up {
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}

.sign-up a {
  color: #3498db;
  text-decoration: none;
}

.sign-up a:hover {
  text-decoration: underline;
}

.volver-atras {
  padding-left: 23px;
  display: flex;
  width: 70px;
  align-items: center;
  margin: 30px auto;
}
<!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">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="code.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="contenido">
      <div class="content">
        <div class="text">Modo Invitado</div>
        <form action="#">
          <div class="field">
            <input type="text" required>
            <span class="fas fa-user"></span>
            <label>Nombre de Usuario</label>
          </div>
          <button>Iniciar Sesion</button>
        </form>
      </div>
      <button class="volver-atras">
        <i data-feather="corner-up-left"></i>
      </button>
    </div>
  </body>
  <script>
    feather.replace();
  </script>
</html>

1
  • 1
    Muchas graciias por la respuesta y aclaración :)
    – ImSilent
    Commented el 15 mar. 2023 a las 14:15
-1

para poder alinear de manera correctar todo lo que hay dentro de los div's, es preferible usar display:flex, e ir jugando un poco con el justify-content, y el align_content. suerte :D

2
  • He probado a modificar el display en el body que es donde lo tengo, y los otros parametros no hacen nada
    – ImSilent
    Commented el 15 mar. 2023 a las 12:36
  • 1
    Gracias por tu contribución, considera revisar Cómo responder, saludos.
    – Jorgesys
    Commented el 15 mar. 2023 a las 14:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.