¿Cómo configurar el contenido de la página en el medio de la pantalla? [duplicate]

Posible duplicado:

Cómo alinear un

al medio de la página

Lo que necesito es mostrar el contenido de una página web en el medio de la pantalla, sin importar el tamaño de la pantalla, grande o pequeña, resolución alta o baja, siempre se ajusta automáticamente al medio de la pantalla.

• Supongo que “Medio de la pantalla” significa centro del navegador. Además, ¿necesita que esté centrado verticalmente, horizontalmente o ambos?

  – JuanFx

  19 de junio de 2012 a las 2:28

Supongo que desea centrar el cuadro tanto vertical como horizontalmente, independientemente del tamaño de la ventana del navegador. Dado que tiene un ancho y una altura fijos para la caja, esto debería funcionar:

Margen:

<div></div>

CSS:

div {
    height: 200px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

El div debe permanecer en el centro de la pantalla incluso si cambia el tamaño del navegador. Simplemente reemplace el margen superior y el margen izquierdo con la mitad de la altura y el ancho de su tabla.

Editar: el crédito es para Trucos CSSde donde saqué la idea original.

• ¿Puedes hacer eso sin CSS?

  – usuario4951

  27 de febrero de 2017 a las 15:24

• ¿El

  va dentro o fuera del cuerpo?

  – usuario1807271

  26 de julio de 2017 a las 19:32

• @ user1807271 No estoy seguro de entender, pero el <div>s debe envolver el contenido que desea centrar, dentro del cuerpo del documento. Esta respuesta también está un poco desactualizada ahora. Es mucho más fácil centrar las cosas con CSS3 flexbox.

  – Zhihao

  26 de julio de 2017 a las 21:21

charlie

Solución para el código que publicaste:

.center{
    position:absolute;
    width:780px;
    height:650px;
    left:50%;
    top:50%;
    margin-left:-390px;
    margin-top:-325px;
}

<table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">
      <tr>
        <td>
        <table width="100%" border="0">
      <tr>
        <td>
        <table width="100%" border="0">
        <tr>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
            <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>        
        </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td>
        <table width="100%" border="0">
        <tr>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
            <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>        
        </tr>
        </table>
        </td>
      </tr>
</table>

—

¿Cómo funciona esto?

Ejemplo: http://jsfiddle.net/953Yj/

<div class="center">
    Lorem ipsum
</div>

.center{
    position:absolute;
    height: X px;
    width: Y px;
    left:50%;
    top:50%;
    margin-top:- X/2 px;
    margin-left:- Y/2 px;
}

• X sería su su altura.
• Y seria tu ancho.

Para posicionar el div vertical y horizontalmente, dividir X y Y por 2.

• ¿Un voto negativo? ¿Qué me estoy perdiendo?

  – charlie

  19 de junio de 2012 a las 3:30

• ¿Qué es el voto negativo? No estoy acostumbrado a este foro, ¿quizás hice algo mal sin querer? lo siento si ese es el caso

  – mdivk

  19 de junio de 2012 a las 15:12

• Puede que no hayas sido tú, actualicé la publicación con el código que publicaste. Además, pegue el código que publicó a continuación en la pregunta original, en lugar de como respuesta.

  – charlie

  19 de junio de 2012 a las 15:21

• Lo siento, tengo que mantener esta publicación sin resolver todavía, uso la solución de Kay y funciona casi como yo quiero y puedes ver aquí: xiexianhui.com/baxjoomla15/index0.html, pero: hay tres problemas: 1. espacio entre las dos filas son demasiado, ¿cómo configurarlas solo como 1px? 2. El fondo es diferente a toda la página. 3. la pagina no esta funcionando completamente con celular. mi celular es sony xperia ray el cual tiene una pantalla de 480 x 854 pixeles, no muestra ninguna imagen al navegar a la pagina. Supongo que también necesito hacer que la imagen cambie de tamaño automáticamente, ¿alguien puede decirme cómo ordenarlos?

  – mdivk

  20 de junio de 2012 a las 15:32

• Si el espacio está desactivado, no se debe a nuestro código. Si el fondo es diferente, cámbielo. Nunca especificó que quería que esto funcionara en su teléfono, pero si lo desea, haga el div eso está centrado ≤ 480px. No mostrar imágenes es un problema con su código, no con lo que hemos estado publicando.

  – charlie

  20 de junio de 2012 a las 20:35

está bien

Si desea centrar el contenido horizontal y verticalmente, pero no sabe de antemano qué altura tendrá su página, debe usar JavaScript.

HTML:

<body>
    <div id="content">...</div>
</body>

CSS:

#content {
    max-width: 1000px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
}

JavaScript (usando jQuery):

$(function() {
    $(window).on('resize', function resize()  {
        $(window).off('resize', resize);
        setTimeout(function () {
            var content = $('#content');
            var top = (window.innerHeight - content.height()) / 2;
            content.css('top', Math.max(0, top) + 'px');
            $(window).on('resize', resize);
        }, 50);
    }).resize();
});

Manifestación: http://jsfiddle.net/nBzcb/

• Gracias chicos, casi ahí, la respuesta de kay es la más cercana, se centra horizontalmente pero no verticalmente, ¿por qué? Aquí está mi código, puse todo en un solo archivo HTML, que es lo que necesito, gracias.

  – mdivk

  19 de junio de 2012 a las 13:56

• si escribo la misma URL que se muestra en su publicación: violín.jshell.net/_display me da:{“error”: “Utilice la solicitud POST”}

  – mdivk

  19 de junio de 2012 a las 15:34

• @mdivk la imagen muestra la subventana de resultados del violín vinculado. La URL canónica de esta subventana es fiddle.jshell.net/nBzcb/show.

  – está bien

  19 de junio de 2012 a las 15:49
  
  
  

• sería genial si pudieras publicar un html para arreglar esto, mira la demostración en vivo: xiexianhui.com/baxjoomla15/index0.html, gracias, el archivo se creó en base a su archivo fuente. al parecer no funciona perfectamente. ¿podría enviarme el archivo de trabajo (basado en mi tabla?) a xie3208080 gmail? gracias.

  – mdivk

  19 de junio de 2012 a las 17:20
  
  
  

• jsfiddle.net/PV9pD (demostración independiente) ← obras. PD: La parte “/banners/” de la URL de tus imágenes hace que mi adblocker las bloquee.

  – está bien

  19 de junio de 2012 a las 17:46

Amin Mousavi

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Center</title>        
    </head>
    <body>
        <div id="main_body">
          some text
        </div>
    </body>
</html>

CSS

body
{
   width: 100%;
   Height: 100%;
}
#main_body
{
    background: #ff3333;
    width: 200px;
    position: absolute;
}​

JS (jQuery)

$(function(){
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var main = $("#main_body");    
    $("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
                          left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});

Ver ejemplo aquí