...
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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias