Aquí va la primera perla de 2Novatos.
Cuantas veces hemos necesitado centrar un div para un diseño, o para posicionar un texto dentro de otra capa? El que diga nunca miente, yo, muchísimas.
Y cuantos de vosotros habéis necesitado centrar un div horizontal y verticalmente? Quizá no tantos, pero si alguna vez lo habéis necesitado y no se os ha ocurrido como, os damos la solución.
Para centrar un div de forma horizontal con CSS solo tenemos que crear un div y aplicarle la siguiente clase:
Centrar horizontalmente:
.centrarH{
width:270px;
height:150px;
margin:0 auto;
}
El único secreto de esta clase es el valor margin al cual le damos el valor 0 auto. Con esto lo que le decimos es que el margen superior e inferior sea igual a 0, y que el margen de la izquierda y de la derecha sean automáticos. Con lo que conseguimos que nuestra capa se posicione al centro.
Bien, y como hacemos que además de centrada horizontalmente lo esté verticalmente? Pues ya no es tan sencillo, pero tampoco es nada difícil, solo tenemos que hacer alguna división…
Centrar horizontal y verticalmente:
.centrarHV{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
Bien, en este caso nuestra clase ya tiene algunos atributos más que la anterior. Esta vez lo que le hemos dicho es que con left y top al 50% nos centre la capa hacia el centro de nuestra pantalla. Pero si solo hacemos eso, la capa se centra en la esquina superior izquierda, y lo que queremos es centrarla desde el centro de la capa en cuestión.
Para ello hacemos uso de una simple división. Creamos el atributo margin dándole valores negativos de la mitad del alto de nuestro div y la mitad del ancho de este. Con lo que el div se centra en el punto medio quedando centrado en la pantalla.
Pues con estas dos simples clases ya tenemos dos divs centrados horizontal y verticalmente. A continuación os dejo con una imagen que hemos hecho, para que veáis, el efecto que va teniendo aplicar las CSS.
