¿Cómo colocar div en el centro de la pantalla?

Question

Actualmente en el centro de la vista actual, por encima de todos los demás objetos. Cross-navegador y sin plugins 3 ª parte y etc

a través de CSS o Javascript

ACTUALIZACIÓN:

He intentado utilizar Sys.UI.DomElement.setLocation de Javascript(), pero este posicionamiento objeto y no en ubicación absoluta pero relativa a su padre.
¿Hay una función para poner en la ubicación absoluta?

Answer 1

Para que se centre en el navegador, independientemente de la página de desplazamiento (que es probablemente lo que desea), la posición: fija será más confiable. Modificación del código de mike108:

<style type="text/css"> 
.centered { 
    position:fixed; 
    z-index: 100; 
    top:50%; 
    left:50%; 
    margin:-100px 0 0 -100px; 
    width:200px; 
    height:200px; 
} 
</style> 

Esto supone que tiene un cuadro de tamaño fijo que está mostrando. Si no tiene un cuadro de tamaño fijo, necesitará usar Javascript para medir la ventana y el div y colocarlo explícitamente (una vez más, arreglado es probablemente el camino a seguir).

Haga la prueba en todos sus navegadores, sin embargo. Puede haber algo en lo que no estamos pensando.

De hecho, le recomendaría que consulte uno de los complementos de Javascript que hace esto, al menos como punto de partida. Lo han descubierto, incluso si no quieres usar su código. Creo que utilicé jqModal como punto de partida.

Answer 2

Debe tener un ancho asignado (es decir, ancho: 500px;) y luego margen: automático; Deberías hacerlo.

Answer 3

<style type="text/css"> 
.Div1 { 
position:absolute; 
top:50%; 
left:50%; 
margin:-100px 0 0 -100px; 
width:200px; 
height:200px; 
border:1px solid #9999FF; 
} 
</style> 


<div class="Div1"> 
</div> 

Answer 4

Si quieres algo vertical y horizontalmente centrado, probar este ...

#shell{ 
width:100%; 
height:100% 
position:absolute; 
z-index:100; 
background: rgba(255,255,255,.8); 
display:table; 
} 

#inner{ 
margin:0 auto; 
display:table-cell; 
vertically-align:middle; 
width: /* input width here */ 
} 


    #overlay_container{ 
    width: /* input width here again */ 
    height: /* input height here */ 
    additional-styles: /* self explanatory */ 
    } 

Answer 5

estoy usando este bloque de código JS;

// función de llamada en altura y en anchura centro

setToCenterOfParent($('#myDiv'), document.body, false, false); 

// función de llamada tanto para centro altura solamente

setToCenterOfParent($('#myDiv'), document.body, false, true); 

// función de llamada tanto para centro de anchura única

setToCenterOfParent($('#myDiv'), document.body, true, false); 

// definición de la función

function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){ 
     parentWidth = $(parent).width(); 
     parentHeight = $(parent).height(); 
     elementWidth = $(element).width(); 
     elementHeight = $(element).height(); 
     if(!ignoreWidth) 
      $(element).css('left', parentWidth/2 - elementWidth/2); 
     if(!ignoreHeight) 
      $(element).css('top', parentHeight/2 - elementHeight/2); 
    } 

Answer 6

Compruebe esta solución. No es necesario definir un ancho o una altura del cuadro div. Siempre estará en el centro/centro de la pantalla. Espero que mi solución sea útil para todos.

<style type="text/css"> 

    .mask{ 
    position:fixed; 
    z-index:100; 
    width:100%; 
    height:100%; 
    text-align: center; 
    color: white; 
    background-color: rgba(0,0,0,0.75); 
    overflow:hidden; 
    } 

    .contener{ 
    height:100%; 
    display:inline-table; 
    } 

    .contener .content{ 
    vertical-align: middle; 
    display:table-cell; 
    } 

    .contener .content p{ 
    padding:2em;  
    border:1px solid #3d3d3d; 
    background-color: #1d1d1d; 
    border-radius: 10px; 
    -moz-box-shadow: 0px 10px 10px black; 
    -webkit-box-shadow: 0px 10px 10px black; 
    box-shadow: 0px 10px 10px black; 
    } 

</style> 

<div class="mask"> 
    <div class="contener"> 
    <div class="content"> 
     <p>Test string</p> 
    </div> 
    </div> 
</div>