Hacer un centro div de la vista - Horizontal y verticalmente

Question

Tengo un contenedor <div id="wrapper"> en el que estará presente todo el contenido de mi sitio. He intentado hacer el centro div vertical y horizontalmente usando la propiedad css como margin:0 auto; on #wrapper.

#wrapper 
{ 
width:500px; 
height:500px; 
margin:0 auto; 
background:#f7f7f7; 
} 

Mediante el uso de CSS por encima de lo que puedo hacer el div en (arriba centro) de la pantalla, pero la manera de hacerlo central (vertical). cuando hago zoom en Firefox, mi div se va a alejar en el centro superior, pero lo que quiero debe estar siempre presente en el centro de la pantalla, tanto vertical como horizontalmente.

¿Puede alguien sugerirme cómo puedo obtener el diseño de esa manera.

Gracias de antemano.

Answer 1

#wrapper 
{ 
width:500px; 
height:500px; 
margin:0 auto; 
background:#f7f7f7; 
position:absolute; 
left:50%; 
top:50%; 
margin-left:-250px; 
margin-top:-250px; 
} 

Demostración: http://jsfiddle.net/fJtNQ/

¿Por qué es este trabajo?

Bueno, básicamente tienes un elemento de posición absoluta dentro del dom. Significa que puede colocarlo donde desee y, si no tiene un elemento de posición relativa como principal, la izquierda y la superior será la distancia desde el origen izquierdo/superior del documento.

Asignación left:50% y top:50% permite a este elemento para ser colocado siempre en el centro de la pantalla, pero en el centro se encuentra la esquina superior izquierda del elemento.

Si ha fijado el ancho/alto, puede "traducir" fácilmente el punto en el centro para que sea realmente el centro de la envoltura div dando margin-left y margin-top negativos (por lo tanto con la ayuda de algunas matemáticas básicas extremadamente fáciles valores serán -(width/2) y -(height/2))

EDITAR

también puede centrar fácilmente mediante el uso flexbox, más (uno grande) que no es necesario especificar w/h, es decir:

body { /* can also be whatever container */ 
    display: -webkit-flex; 
    display: flex; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

#wrapper { 
    /* whatever style u want */ 
} 

demo: https://jsfiddle.net/00utf52o/

Answer 2

utilizo jQuery

$(window).resize(function(){ 

    $('.className').css({ 
     position:'absolute', 
     left: ($(window).width() - $('.className').outerWidth())/2, 
     top: ($(window).height() - $('.className').outerHeight())/2 
    }); 

}); 

// To initially run the function: 
$(window).resize(); 

Answer 3

---

considerar el uso de display: table junto con display: table-cell; vertical-align: middle en un elemento separado. Como CSS no tiene un significado semántico, es una solución aceptable.

trabajé hasta un ejemplo para usted: http://dabblet.com/gist/2002681

El único inconveniente es que requiere un poco más marcado que otras soluciones, pero se contrae y se expande con el contenido.

Answer 4

Aquí hay una solución para aquellos que necesitan centrar un div en relación con la ventana gráfica y no "relativo al div principal". Otras soluciones mencionadas aquí no funcionan en este caso, ya que tienden a hacer que el centro div infantil se relacione con el div principal.

<div id="container"> 
    <div id="wrapper">Always center, No matter the parent div's position</div> 
</div> 

#wrapper { 
width:300px; 
height:300px; 
margin:0 auto; 
background:green; 
position:fixed; 
left:50%; 
top:50%; 
margin-left:-150px; 
margin-top:-150px; 
} 

#container { 
    display: block; 
    position: absolute; 
    width: 400px; 
    height: 400px; 
    border: 1px solid red; 
    bottom: 0; 
    left: 0; 
} 

demostración aquí http://jsbin.com/yeboleli/2/edit?css,output

Answer 5

@ respuesta de stecb funciona bien si se trabaja con ancho fijo/altura.

Para colocar un div o una imagen verticalmente en el centro de todas las vistas y volverlo más sensible, utilice esto:

#elem-to-center { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Acabo de cambiar margin-left y margin-top con transformar.

Si desea un margen que rodea el elemento, utilice la siguiente:

#outer-elem { 
    width: 100%; 
    height: 100%; 
    padding: 30px; 
    background: #fafafa; 
    position: relative; 
} 
#elem-to-center { 
    width: calc(100% - 60px); 
    max-height: calc(100% - 60px); 

    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

JSFiddle | Source

Me pareció útil incluso en vistas receptivas.

Answer 6

El más simple y la manera más limpia de hacer esto sería mediante el establecimiento de la altura, el margen (y el ancho, si lo desea) usando tamaños de ventana gráfica.
Digamos que quiere que el contenedor height ocupe el 60% (60vh) de la pantalla, puede dividir el resto (40vh, desde la altura total de la ventana = 100vh) igualmente entre el margen superior e inferior para que el elemento se alinea automáticamente en el centro.
Ajuste del margin-left y margin-right-auto, se asegurará de que el contenedor se centra horizontalmente.

.container { 
 
     width: 60vw; /*optional*/ 
 
     height: 60vh; 
 
     margin: 20vh auto; 
 
     background: #333; 
 
}

<div class="container"> 
 
</div>