He visto un millón de preguntas acerca de cómo el centro de un elemento de bloque y parece ser que hay un par de maneras más populares de hacer, pero todas se basan en píxeles de ancho. Luego margin:0 auto o con absoluta/relativa de posicionamiento y left:50%; margin-left:[-1/2 width]; etc. Todos sabemos que esto no puede funcionar si el elemento tiene un ancho establecido en %.

Hay realmente ninguna manera de hacer esto de una manera que es realmente fluido? Estoy hablando sobre el uso de % de ancho (no configuración de una docena de consultas de medios de comunicación cada vez más pequeño ancho fijo).

Cuidado: hay un montón de soluciones de ahí que el uso de la palabra «sensible», pero no respuesta a mi pregunta (ya que el uso de ancho fijo de todos modos). Aquí un ejemplo.

Actualización:
Casi se me olvidaba: ¿cómo se puede tratar de limitar el ancho máximo de la centrada en el elemento y que lo mantienen en el centro? Ver mi comentario bajo @smdrager la respuesta. Ejemplo de la vida Real. Quiero un mensaje pop-up o una caja de luz, efecto que contenga un párrafo de texto que aparecerá en el centro de la ventana y el texto se ajuste de forma fluida en función de la anchura. Pero no quiero que el cuadro de texto para estirar toooo lo que el texto iba a ser difíciles de leer (imagina una pantalla de 4 pulgadas con tres párrafos se extendía en una sola línea de texto). Si agrega un max-width para la mayoría de los enfoques, el centrado en el cuadro de dejar de centrar cuando el ancho máximo es alcanzado.

  • ¿Cómo se margin: 0 auto fijo de píxeles? jsfiddle.net/Qgg2g
  • Tal vez usted puede utilizar display: inline-block;, si es una opción para usted, y el uso text-align: center; en el contenedor.
  • jsfiddle.net/Qgg2g
  • Hmm, yo nunca lo había visto, así que supongo que yo nunca había probado y asumió que no era posible. Me demostró que estaba equivocada allí!
  • este artículo puede ayudar
  • En realidad hay decenas de método, obsoletos o muy nuevos que no debe ser variadas, pero se pueden utilizar juntos , todo depende de tus marcas, situación en su página, fondos, … ¿cuál es tu ejemplo de la vida real que te preocupa ?
  • max-width:XX%; o XXpx; o cualquier valor que se adapte a su necesidad.
  • Ver mi actualización a la pregunta.
  • thx por sus detalles : es el que más cerca de su situación ? : codepen.io/gcyrillus/pen/daCyu (respuesta actualiza )

InformationsquelleAutor emersonthis | 2013-07-09

6 Comentarios

  1. 42

    De centrado horizontal y verticalmente

    Realidad, de tener la altura y la anchura en porcentajes hace centrar aún más fácil. Usted acaba de desplazamiento de la izquierda y la parte superior de la mitad de la superficie no ocupada por la div.

    Así que si la altura es 40%, 100% – 40% = 60%. Así que quieres un 30% por encima y por debajo. A continuación, parte superior: 30% hace el truco.

    Ver el ejemplo aquí: http://dabblet.com/gist/5957545

    Centrado sólo en horizontal

    Usar inline-block. La otra respuesta aquí no funciona para IE 8 y a continuación, sin embargo. Usted debe usar un CSS hack o estilos condicionales para que. Aquí está el hack versión:

    Ver el ejemplo aquí: http://dabblet.com/gist/5957591

    .inlineblock { 
        display: inline-block;
        zoom: 1;
        display*: inline; /* ie hack */
    }

    EDITAR

    Mediante el uso de consultas de medios de comunicación puede combinar dos técnicas para lograr el efecto que desea. La única complicación es la altura. Utilizar un div anidados para cambiar entre el % de ancho y

    http://dabblet.com/gist/5957676

    @media (max-width: 1000px) {
        .center{}
        .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
    }
    @media (min-width: 1000px) {
        .center{left:50%;top:25%;position:absolute;}
        .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
    }
    • A la derecha! El suyo funciona. Pero se me olvidó mencionar un problema más: la configuración de un max-width/height. Aquí es donde yo siempre quedas atascado. Por ejemplo, pretender que el centrado de la caja es un pop-up con un párrafo de texto. Desea que en el medio de la pantalla, pero si alguien está viendo en una de 4 pies de ancho de la pantalla, usted no desea que el cuadro de ancho a escala allllll la forma y transformarse en un super-largo de la línea. Es allí una manera de manejar esto?
    • Una ventana emergente y una página son casos diferentes. en un caso se establece una altura de 100% y el otro un min-altura en la que el contenido va en vertical-align. Para el ancho, es todo depende de su elección para definir el valor de max-width.
    • Editado para incluir su nueva especificación 🙂
    • Ahora estamos hablando!! Puede usted explicar su IE hack desde el código original (display*...). Veo que has eliminado en la segunda iteración.
    • La versión de EDICIÓN no usar el hack. Aquí está una explicación de cómo funciona, a pesar de que: stackoverflow.com/a/6545033/356550
    • adjudicados!!
    • El OP se menciona explícitamente una solución sin soluciones adaptables y de líquido en los resultados. También cuando se muestra una absoluta div en línea bloque de su padre tiene que tener text-align:center; por Lo que está fuera.
    • ¿de dónde él explícitamente dicen que no hay soluciones adaptables?
    • Su primera frase, «pero todas se basan en píxeles de ancho.»

  2. 17

    De Chris Coyier del artículo en centrado porcentaje de ancho elementos:

    Lugar de utilizar márgenes negativos, utilice negativo translate()
    transforma.

    .center {
      position: absolute;
      left: 50%;
      top: 50%;
    
      /*
      Nope =(
      margin-left: -25%;
      margin-top: -25%;
      */
    
      /* 
      Yep!
      */
      transform: translate(-50%, -50%);
    
      /*
      Not even necessary really. 
      e.g. Height could be left out!
      */
      width: 40%;
      height: 50%;
    }

    Codepen

    • Esta es una idea genial. Pero no es el navegador soporte para css transformaciones todavía muy delgada? Yo no estipulan soporte de los navegadores, pero mi sensación es que esto casi siempre requieren un js de reserva para cualquier proyecto de producción. No?
    • Cualquier usuario sigue utilizando Windows XP y el IE 8 no puede ver eso. Cualquier usuario con ie 10-11, chrome, firefox, safari y cualquier navegador móvil basado en chrome, firefox o ie 10-11 va a ver, así que no debería ser un problema. No fue un inconveniente, sin embargo, en el uso de traducir, pero nada increíblemente mala, el problema es que no recuerdo de qué era que ahora (nada acerca del rendimiento o la compatibilidad). El hecho de que la pregunta se hizo hace 1 año requiere también la actualización de la respuesta que probablemente hace que esta sea la correcta.
    • Cabe señalar que transform es más práctico utilizar para el posicionamiento. Una razón es que cuando se desea animar el elemento de destino utilizando un fotograma clave de la animación que incluye transforma, se sobrescribirá su centrado, obligando a reescribir las animaciones. Ese es un tema genérico con lo pobres que son los CSS transformaciones y animaciones de fotogramas clave son, no específico para sólo este ejemplo.
  3. 12

    Creo que se puede utilizar display: inline-block en el elemento que desee centro y de text-align: center; en su padre. Esto definitivamente centro de la div en todos los tamaños de pantalla.

    Aquí puedes ver un violín: http://jsfiddle.net/PwC4T/2/ puedo agregar el código para completar.

    HTML

    <div id="container">
        <div id="main">
            <div id="somebackground">
                Hi
            </div>
        </div>
    </div>

    CSS

    #container
    {
        text-align: center;
    }
    #main
    {
        display: inline-block;
    }
    #somebackground
    {
        text-align: left;
        background-color: red;
    }

    Para el centrado vertical, me «cayó» el apoyo de algunos de los navegadores más antiguos en favor de display: table;, que absolutamente reducir el código, consulte este violín: http://jsfiddle.net/jFAjY/1/

    Aquí está el código (de nuevo) para la integridad:

    HTML

    <body>
        <div id="table-container">
            <div id="container">
                <div id="main">
                    <div id="somebackground">
                        Hi
                    </div>
                </div>
            </div>
        </div>
    </body>

    CSS

    body, html
    {
        height: 100%;
    }
    #table-container
    {
        display:    table;
        text-align: center;
        width:      100%;
        height:     100%;
    }
    #container
    {
        display:        table-cell;
        vertical-align: middle;
    }
    #main
    {
        display: inline-block;
    }
    #somebackground
    {
        text-align:       left;
        background-color: red;
    }

    La ventaja de este enfoque? Usted no tiene que lidiar con cualquier percantage, también maneja correctamente el <video> etiqueta (html5), que tiene dos tamaños diferentes (uno durante la carga, uno después de la carga, no puedes capturar el tamaño de la etiqueta ‘hasta que el vídeo se cargue).

    La desventaja es que se cae de apoyo para algunos de los mayores navegador (creo que IE8 no se manejar esto correctamente)

    • Idea genial. Para completar, se puede proporcionar un jsfiddle o algún código?
    • Sí, he creado ahora mismo.
    • Actualizado para el centrado vertical demasiado, también se pueden ver dos violines (uno con centrado horizontal de sólo, uno vertical y horizontal centrado).
    • El próximo paso será flexbox: weblog.bocoup.com/dive-into-flexbox pero esto no es apoyado por el momento.
    • Muchas gracias por esta respuesta, yo siempre te olvidas de cómo rápidamente el centro de un div sin dar absoluta de ancho, pero con este método puedo recordar fácilmente [text-align: center div con el niño div con display:inline-block].
    • Esto es grande para los elementos con la dinámica de los anchos gracias
    • ¿Cómo puedo conseguir que esto de jugar muy bien con un botón que se encuentra en el interior de la somebackground div? Se muestra en una nueva línea a través de navegadores y Safari ignora el hecho de que me dijo que vaya a estar centrado.

  4. 1

    EDICIÓN :

    http://codepen.io/gcyrillus/pen/daCyu
    Así, por una ventana, usted tiene que utilizar la posición de:fijo , pantalla:pantalla de propiedades de tabla y max-width con em o rem valores 🙂

    con este CSS base :

    #popup {
      position:fixed;
      width:100%;
      height:100%;
      display:table;
      pointer-events:none;
    }
    #popup > div {
      display:table-cell;
      vertical-align:middle;
    }
    #popup p {
      width:80%;
      max-width:20em;
      margin:auto;
      pointer-events:auto;
    }
  5. 0

    Algo como esto podría ser?

    HTML

     <div class="random">
            SOMETHING
     </div>

    CSS

    body{
    
        text-align: center;
    }
    
    .random{
    
        width: 60%;
        margin: auto;
        background-color: yellow;
        display:block;
    
    }

    DEMO: http://jsfiddle.net/t5Pp2/2/

    Edición: agregar display:block no arruinar la cosa, así que…

    También puede establecer el margen: margin: 0 auto 0 auto; sólo para estar seguro de que los centros de esta manera, no desde la parte superior también.

  6. 0

    Esto puede sonar muy simplista…

    Pero esto va a centrar el div dentro del div, exactamente en el centro en relación a los márgenes izquierdo y derecho o contenedor principal, pero usted puede ajustar el porcentaje de forma simétrica a la izquierda y a la derecha.

    margin-right: 10%;
    margin-left: 10%;

    A continuación, puede ajustar el % sea tan amplia como usted lo desea.

Dejar respuesta

Please enter your comment!
Please enter your name here