Centrar una posición: elemento fijo

439

Me gustaría hacer un position: fixed;cuadro emergente centrado en la pantalla con un ancho y alto dinámicos. Yo solía margin: 5% auto;para esto. Sin position: fixed;ella se centra bien horizontalmente, pero no verticalmente. Después de agregar position: fixed;, incluso no se centra horizontalmente.

Aquí está el conjunto completo:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
Expandir fragmento

¿Cómo centro este cuadro en la pantalla con CSS?

css  css-position  centering 
— saturngod
fuente

Respuestas:

606

Usted necesita básicamente conjunto topy leftpara 50%centrar la esquina superior izquierda de la div. También es necesario establecer el margin-topy margin-leftla mitad negativa de la altura y la anchura del div para desplazar el centro hacia el centro de la div.

Por lo tanto, siempre que <!DOCTYPE html>(modo estándar), esto debería hacer:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

O, si no le importa centrar verticalmente y navegadores antiguos como IE6 / 7, entonces también puede agregar left: 0y right: 0al elemento que tiene un margin-lefty margin-rightde auto, para que el elemento posicionado fijo que tiene un ancho fijo sepa dónde está a la izquierda y comienzan las compensaciones a la derecha. En tu caso así:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Nuevamente, esto funciona solo en IE8 + si te importa IE, y esto se centra solo horizontalmente, no verticalmente.

— BalusC
fuente
8
Encontré ese truco en css-tricks.com/… . Pero cuando cambio el ancho y la altura, no se mueve el centro. Sí, debería cambiar el margen izquierdo y superior cuando cambie la altura y el ancho.
— Sábado
2
FYI: esto posicionará correctamente las cosas en el medio, pero desafortunadamente pierde sus barras de desplazamiento: cualquier contenido recortado por la ventana gráfica no será accesible, incluso si se desplaza, porque la posición fija se basa en la ventana gráfica, no en el página. Hasta ahora, la única solución que he encontrado para eso es con javascript.
— Groxx
3
Groxx Creo que podría poner barras de desplazamiento dentro de un div en la ventana emergente utilizando la propiedad de desbordamiento .
— David Winiecki
1
Además, para este necesitas saber el ancho del elemento.
— Héctor Ordóñez
2
ah nm si ese es el caso, quiero decir, por supuesto, el tamaño del navegador será dinámico, no estoy seguro de por qué eso estaba en la pregunta. En cambio, pensé que quería decir que las dimensiones emergentes necesitaban ser dinámicas. ese es el caso para mí, así que estoy usando transform: translate (-50%, -50%); funciona muy bien, excepto en IE8.
— noches
324

Quiero hacer un cuadro emergente centrado en la pantalla con ancho y alto dinámicos.

Aquí hay un enfoque moderno para centrar horizontalmente un elemento con un ancho dinámico: funciona en todos los navegadores modernos; El apoyo se puede ver aquí .

Ejemplo actualizado

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Para el centrado vertical y horizontal, puede usar lo siguiente:

Ejemplo actualizado

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

Es posible que también desee agregar más propiedades con prefijo de proveedor (consulte los ejemplos).

— Josh Crozier
fuente
1
Estoy usando este enfoque para centrar horizontalmente una imagen de posición fija cuyo ancho es mayor que el ancho de la ventana y funciona bien al menos en las versiones actuales de Firefox, Chrome, IE 11 y Edge.
— jelhan
1
En mis pruebas, esto funciona muy bien (detrás de los prefijos), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome y Safari, Android 4.4+ Chrome. El único error para mí fue Android 4.0, donde no se produjo la traducción.
— danjah
2
@ahnbizcad, esto funciona en navegadores de escritorio como Chrome 61, Safari 11 y FireFox 65, pero no en Chrome 61 en Android 6, la respuesta aceptada funciona en todos los navegadores.
— Erik Barke
55
Esto hace que las imágenes sean borrosas en Chrome.
— Tomasz P. Szynalski
1
De alguna manera, solo enfoque que funcionó correctamente en todos los navegadores con mi img. ¡Gracias un montón!
— Kugelfisch
136

O simplemente agregue left: 0y right: 0a su CSS original, lo que hace que se comporte de manera similar a un elemento regular no fijo y la técnica habitual de margen automático funciona:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Tenga en cuenta que necesita usar un HTML (X) válido DOCTYPEpara que se comporte correctamente en IE (¡lo cual, por supuesto, debería tener de todos modos ...!)

— Will Prescott
fuente
2
¿En qué sentido? El elemento padre es el elemento del cuerpo, que no tiene bordes. Si agregaste propiedades de borde al cuerpo (?!), Entonces seguro que se vería afectado, al igual que la técnica del 50% que imagino. Le aseguro que funciona bien con los parámetros dados, solo se verifica en todos los navegadores que tengo a mano, y tiene el beneficio adicional de no depender del ancho del elemento.
— Will Prescott
55
Todo lo que hice fue agregar esas 2 propiedades y un doctype al ejemplo HTML del OP. Sin embargo, en pruebas posteriores parece que IE7 (u 8 en modo compat) es el problema, ¡parece que no respeta el valor de la rightpropiedad si lefttambién está configurado! ( msdn.microsoft.com/en-us/library/… observa eso lefty rightsolo tiene soporte "parcial" en IE7). OK, reconozco que esta solución no es buena si el soporte de IE7 es importante, pero es un gran truco para recordar en el futuro :)
— Will Prescott
77
Esta debería ser la respuesta aceptada. Tenía dos posiciones fijas, una para la máscara de opacidad y otra para el modal. esta era la única forma en que podía centrar la posición fija modal en el centro de la pantalla. Impresionante respuesta que hubiera pensado?
— Chris Hawkes
3
Estoy de acuerdo, esta debería ser la respuesta aceptada. También funciona perfectamente en un diseño receptivo, ya que no depende del ancho.
— Héctor Ordóñez
77
Sugeriría simplificar la respuesta, ya que algunos de los CSS son relevantes solo para el OP. Todo lo que necesitas es posición: fijo; izquierda: 0; derecha: 0; margen: 0 automático; .
— Héctor Ordóñez
23

Agregue un contenedor como:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Luego ponga su caja en este div hará el trabajo.

— Romulus Urakagi Ts'ai
fuente
"text-align: center" no funcionó para mí al centrar el div interno.
— nima
2
La caja interna debe ser display: inline-blockpara que esto funcione. (Algunos otros valores de visualización también podrían funcionar, como table.)
— Brilliand
un mejor enfoque para el css mencionado anteriormente sería agregar margin:auto;y cambiar el ancho width:50%ao width:400px. entonces el contenido puede ser texto directo, elementos de bloque o elementos en línea.
— Joshua Burns
20

Solo agrega:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— Beto
fuente
1
Esto no funciona position: fixed, de eso se trata la pregunta. Si me equivoco, edite su respuesta para incluir un fragmento de código ejecutable.
— Flimm
1
Funciona muy bien con posición fija.
— Phuhui
1
Funciona con position: fixed, siempre que establezca el max-widtho widthal elemento.
— Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

En su interior puede haber cualquier elemento con diffenet ancho, alto o sin él. Todos están centrados.

— Praffessorr
fuente
5

Esta solución no requiere que defina un ancho y alto para su div emergente.

http://jsfiddle.net/4Ly4B/33/

Y en lugar de calcular el tamaño de la ventana emergente, y menos la mitad de la parte superior, javascript está cambiando el tamaño del Contenedor emergente para llenar toda la pantalla ...

(100% de altura, no funciona cuando se usa display: table-cell; (que se requiere para centrar algo verticalmente)) ...

De todos modos funciona :)

— BjarkeCK
fuente
4 
left: 0;
right: 0;

No funcionaba bajo IE7.

Cambiado a 

left:auto;
right:auto;

¡Comenzó a funcionar pero en los demás navegadores dejó de funcionar! Así se usa de esta manera para IE7 a continuación

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
— jatinder
fuente
¿Te importa editar tu respuesta para incluir la solución completa?
— Flimm
Esto no funcionará sin un margen automático en los lados izquierdo y derecho.
— RoM4iK
2

Básicamente, puede envolverlo en otro divy configurarlo positionen fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
Expandir fragmento

— Abdulla Dlshad
fuente
2

Utilicé vw(ancho de ventana) y vh(altura de ventana). viewport es tu pantalla completa. 100vwes el ancho total de sus pantallas y la 100vhaltura total.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
— Aseem
fuente
1

Para arreglar la posición usa esto:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— Cabeza y cola
fuente
3
Proporcione una explicación de por qué su solución funcionaría para la pregunta publicada.
— Shekhar Chikara
0

Una posible respuesta :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
— Martin Vahi
fuente
Esto parece funcionar, aunque requiere que ya conozca el ancho y la altura del elemento.
— Flimm
0

Intente usar esto para elementos horizontales que no se centren correctamente.

ancho: calc (ancho: 100% - ancho todo lo demás está centrado )

Por ejemplo, si su barra de navegación lateral es 200px:

width: calc(100% - 200px);
— Robert Ross
fuente
0

Solo uso algo como esto:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Centra el cuadro de diálogo tanto horizontal como verticalmente para mí, y puedo usar diferentes anchuras y alturas para adaptarse a diferentes resoluciones de pantalla para que responda, con consultas de medios.

No es una opción si aún necesita proporcionar soporte para navegadores donde las propiedades personalizadas de CSS o calc()no son compatibles (verifique caniuse).

— Fabien Snauwaert
fuente
0

Este funcionó mejor para mí:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— Flafy
fuente
-13

La única solución infalible es usar table align = center como en:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

No puedo creer que la gente de todo el mundo desperdicie esta cantidad copiosa en un tiempo tonto para resolver un problema tan fundamental como centrar un div. La solución css no funciona para todos los navegadores, la solución jquery es una solución computacional de software y no es una opción por otras razones.

He perdido demasiado tiempo repetidamente para evitar usar la mesa, pero la experiencia me dice que deje de luchar contra ella. Use la tabla para centrar div. ¡Funciona todo el tiempo en todos los navegadores! Nunca más te preocupes.

— Cheong
fuente
11
Esto no responde a la pregunta en absoluto. No hay un equivalente que no sea CSS position:fixed.
— Brilliand
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.