Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Centrar un elemento div horizontal y verticalmente con CSS y Dreamweaver

18 enero, 2012
en CSS
0
Reglas CSS por defecto para los navegadores

Ya hemos visto como centrar un div horizontalmente, los margenes laterales se adaptan automáticamente a la ventana del navegador independientemente de la anchura de la ventana. hacer lo mismo verticalmente no es tan sencillo. Desgraciadamenete la propiedad margin: auto no funciona tal y como se espera para los márgenes verticales y la página no se muestra centrada. Requiere de unos cálculos previos y esto es lo que haremos aquí, ver cuales son estos cálculos. Normalmente no será necesario centrar verticalmente ya que el contenido de la web suele ser mayor que la altura de la ventana.

La única forma que tenemos de centrar verticalmente es con posicionamiento absoluto, es decir, es necesario conocer las medidas del contenedor de nuestra web. Esto normalmente lo sabremos siempre que queramos. Aquí veremos como centrar vertical y horizontalmente un div

Este es el código que necesitamos

position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
margin-top: -100px;
margin-left: -150px;

Vamos a ver que hace este código:

Partimos de siguiente situación de un div dentro de nuestra web:

contenedor 1

Aplicamos:

position: absolute;
left: 50%;
top: 50%;

Y tendremos la siguiente imagen

contenedor 2

En este punto casi lo hemos conseguido, solamente nos falta poner que centro de las lineas discontinuas rojas coincidan con el centro de las lineas discontinuas negras. En este caso nos ayudaremos de la propiedad marging-top y marging-left a las que podemos dar el valor que queramos, incluso un valor negativo. Recordamos que el ancho de nuestro div es de 300px, por lo cual tengo que desplazar hacia la izquierda la mitad de esa cantidad, que seran 150px, el simbolo negativa nos indica que me desplazo hacia la izquierda

margin-left: -150px;

Lo mismo nos ocurre con la altura, tengo que deplazar hacia arriba la distancia de 100px, que es la mitar de la altura de nuestro div, con lo cual tendré

margin-top: -100px;

contenedor 3

Por último, una vez aplicado lo anterior, como resultado tendremos centrado verticalmente y horizontalmente nuestro div

contenedor 4

Como resultado final, el código de todo esto será (he añadido un color de fondo para mejorar la visibilidad):


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.centrar {
background-color: #FF9;
overflow: hidden;
position: absolute;
height: 200px;
width: 300px;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style>
</head>
<body>
<div>Colocar aquí el contenido de la nueva etiqueta Div</div>
</body>
</html>

Ver ejemplo funcionando

En las siguientes imágenes puedes ver como sería todo este trabajo desde Dreamweaver:

[Mostrar como diapositivas]
contenedor-5
contenedor-6
contenedor-7
contenedor-8
Etiquetas: cssdreamweaverDWmargin
ANUNCIO
Post anterior

Centrar un elemento div horizontalmente con CSS y Dreamweaver

Próximo Post

Manual Adobe Dreamweaver CS5.5

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Por favor logueate para comentar

Recomendados

Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Html: Listas

19 diciembre, 2010
Diferencias entre SEO, SEM Y PPC

Diferencias entre SEO, SEM Y PPC

24 marzo, 2019
Manual diseño web: Planificación y configuración de un sitio web

Diseñar un sitio: ¿cuáles son las fases de creación de una página?

26 septiembre, 2019
Anuncios de Video en Google ADS

Anuncios de Video en Google ADS

17 junio, 2019

Tutotial Monstersse

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .