Div central fijo con ancho dinámico (CSS)

89

Tengo un div que tendrá este CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Ahora, ¿cómo puedo hacer que este div esté centrado? Puedo usarlo, margin-left: -450px; left: 50%;pero esto solo funcionará cuando la pantalla tenga> 900 píxeles. Después de eso (cuando la ventana tenga <900 píxeles), ya no estará centrada.

Por supuesto, puedo hacer esto con algún tipo de js, pero ¿hay una forma "más correcta" de hacer esto con CSS?

css html center

— gubbfett
fuente

4

@Liam - No estoy de acuerdo, creo que esta pregunta es directa por sí sola. Esas preguntas no responden a esta en cuanto a tener un div sin ancho fijo centrado.

— Joshua M

Lo que dijo Joshua, eso es para centrar un div en otro.

— gubbfett

7

@Liam - Además de eso, no puedes usar un margin: 0 autoen un position: fixeddiv. ¿Leíste siquiera la pregunta?

— Joshua M

^ nop. Yo también lo he intentado. : p

— gubbfett

3

@JoshuaM Tu afirmación no es 100% correcta. Mira mi respuesta.

— laconbass

222

Puede centrar un fixedo absoluteajuste de elemento posicionado righty leftto 0, y luego margin-left& margin-rightto autocomo si estuviera centrando un staticelemento posicionado.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

Vea este ejemplo trabajando en este violín .

— laconbajo
fuente

1

Solo para mencionar ... No es tan inesperado, pero falla en IE7. Está ubicado a 0px desde la izquierda aquí. Lo hace cómo cada vez perfecto trabajo en IE 8.

— gubbfett

Esto no funciona cuando el ancho del elemento es mayor que el ancho de la pantalla ... sería bueno que funcionara en esa situación.

— andrewb

1

@andrewb podría aplicar un margen igualmente negativo tanto en rightcomo leftde al menos a value >= witdth / 2, como se ve en jsfiddle.net/PvfFy/168 , pero no es un enfoque elegante en mi humilde opinión. Lo probé en Chrome por diversión, no sé si funcionará en el resto

— laconbass

5

Fuera del alcance de la pregunta, esto depende de la configuración del ancho del elemento, por lo que no es bueno si tiene contenido dinámico cuyo ancho es variable o desconocido. Dejando el centrado a un lado, normalmente lo haría con la pantalla: bloque en línea y sin ancho establecido. ¿Alguien tiene una solución no-js para ese caso?

— enigment

4

La pregunta dice ancho dinámico , ese es todo el problema, no puedes ignorarlo.

— Gil Epshtain

54

Aquí hay otro método si puede usar de forma segura la transformpropiedad de CSS3 :

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... o si desea centrado tanto horizontal como vertical:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

— Alan Bellows
fuente

5

Siempre que sea para un navegador moderno, ¡esta es la MEJOR solución en esta respuesta! El único que es como un verdadero 'float: center', en el que puede hacer clic alrededor del elemento envolvente y no tener que pescar alrededor de él. ¡Amo esta respuesta!

— SpYk3HH

1

Tenga cuidado, no utilice la traducción en porcentaje para centrar el texto, ya que se suavizará si el valor resultante es flotante. Ho chico, no quieres eso, no, no lo quieres.

— gnou

El uso de transformaciones CSS puede hacer que se produzca suavizado en más que solo texto; Me están poniendo fronteras funky como resultado de la transformación.

— Nathan K

1

Posibilidad de contraerse temprano al cambiar el tamaño de la pantalla (dependiendo del tamaño de la división), lo que resulta en grandes fronteras alrededor del borde de la división

— Entidad única

7

<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Necesitarías envolverlo en un recipiente. aquí está el css

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}

— Mathew Berg
fuente

Ah, me gusta tu forma de pensar. ¿El div fijo solo será un contenedor para otro div con el resultado real? ¡Probaré este!

— gubbfett

Si bien me gusta la intuición de su respuesta, no veo cómo permitiría el soporte de ie6 / 7.

— Mathew Berg

1

@MathewBerg, buen punto sobre ie6 / 7. En ese caso, su respuesta debería funcionar mejor. Esto es un poco de OT, pero personalmente creo que los desarrolladores no deberían perder tiempo arreglando cosas para <= ie7. Creo que en realidad los desarrolladores deberían bloquear esos navegadores para obligar a las personas y empresas con sistemas antiguos a actualizarse. ¡Es muy difícil vender esa idea a un cliente que paga! ;)

— gubbfett

Sí, pero desafortunadamente algunas empresas requieren soporte para navegadores heredados sin importar cuán lejos estemos en el futuro. Continúe y acepte la respuesta mía o de laconbass según sus necesidades.

— Mathew Berg

1

esto tampoco funciona porque todavía no puedes hacer clic en "contenedor"

— SpYk3HH

4

Esto funciona independientemente del tamaño de su contenido.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

fuente: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

— Leonardo
fuente

2

cuidado: transform: translate(-50%, -50%);hace que el texto sea borroso (al menos en cromo)

— Jiří