html - Centrar todos los elementos en bootstrap 4

Estoy intentando crear un formulario de registro sencillo con sólo unos pocos elementos y quiero para que todos los elementos queden centrados.

pero cuando lo combino con bootstrap todos mis elementos se vuelven más pequeños, por ejemplo cuando tengo elemento con un ancho del 100%, cuando se utiliza la opción "centrada" clase pasará a ser del 25%.

¿Alguien puede ayudarme a determinar qué clase de arranque debo usar para centrar todos los elementos? Porque usar CSS normal y bootstrap aparentemente no es una buena combinación... algo como:

.centered {
  position: fixed;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
}

<div class="container center">
  * HTML tags goes here.... */
</div>

Gracias.

¿Puedes compartir tu código completo?

- Manas Khandelwal

28 de marzo de 2021 a las 9:43

¿Cómo ayudará esto? sólo quiero saber cómo hacer eso con bootstrap...

– este chico yolf

31 de marzo de 2021 a las 16:53

He añadido la respuesta, con respecto al código proporcionado...

- Manas Khandelwal

31 de marzo de 2021 a las 17:23

------------------------------------

Puedes hacer esto:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container center centered">
  * HTML tags goes here.... */
</div>

------------------------------------

Si quieres usar CSS puro, entonces puedes usar algo como

.layout {
  position: fixed;
  width: 100 vh
  height: 100 vw;
  display: grid;
  place - items: center;
}

<div class='layout'>
  <div class='form'>
  </div>
</div>

Esto te servirá.

Respondido

28 de marzo de 2021 a las 9:58

Ganesh R

GaneshR

1

1

1 insignia de bronce