Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
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
Share on FacebookShare on Twitter

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:

[nggallery id=5]
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...

Recomendados

Formación para convertirte en un experto en Negocios Digitales

Formación para convertirte en un experto en Negocios Digitales

8 julio, 2021
Como acceder a la administración de WordPress

Solución para: Warning: Cannot modify header information – headers already sent by (output started…

7 agosto, 2011
Web semantica con HTML5

HTML5 Cheat Sheet

6 agosto, 2012
Reglas CSS por defecto para los navegadores

Reglas CSS por defecto para los navegadores

21 mayo, 2012

Tutotial Monsters

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
  • Store
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 .