Centrado absolucto de elementos con bootstrap y CSS

Centrado absoluto

Usuario

...

Centrado horizontal

Para centrar un formulario o elemento HTML es bastante sencillo

Se puede hacer de diversas formas, por ejemplo si es un elemento en linea basta con que aplicar la propriedad CSS text-align:center

Si se trata de un elemento en block, tenemos que poner la propriedad width para defenir un ancho y aplicar otra propriedad de CSS margin:auto

Centrado vertical y horizontal

Para centrar verticalmente y horizontalmente, tenemos que poner la propriedad display:flex al contenedor, e darle un alto de la pantalla

Tambien tenemos que poner las propriedades align-items: enter; justify-content: center; para que los hijos se alignem al centro

El seguiente codigo es el ejemplo que se ve en pantalla

Codigo del ejemplo de los estilos CSS

     .container {
        display: flex;
        margin-top: 10px;
        width: 100%;
        border: 3px solid red;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
    }

    form {
        border: 3px solid green;
        width: 350px;
        margin: auto;
    }

    .texto {
        border: 3px solid black;
        padding: 10px;
        margin: 10px;
    }

    label {
        border: 3px solid yellow;
        padding: 10px;
        margin: 10px;
    }

    input {
        border: 3px solid blue;
        padding: 10px;
        margin: 10px;
    }
    

Codigo del ejemplo del HTML

     <div class="container">
            <form action="" method="post">
                <h3 class="texto">Centrado absoluto</h3>
                <label for="">Usuario</label>
                <input type="text" name="User" id="" placeholder="usuario">
            </form>
        </div>
    

Ir al índice