Quiero colocar div que tiene posición absoluta en el centro de la vista de la pantalla (desplazado o no se desplaza).

Tengo este pero sus lugares div a mediados de od en el documento y no en el centro de la vista actual.

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-70px;
    margin-top:-50px;   
}
InformationsquelleAutor asker | 2010-12-16

7 Comentarios

  1. 48

    Cambio position:absolute a position: fixed y usted debe ser bueno para ir!

    Cuando usted dice de la posición absoluta, la referencia div es el div padre que tiene una posición relativa. Sin embargo, si usted dice de la posición fija, la referencia es la ventana del navegador. que es wat que usted desea en su caso.

    En el caso de IE6 supongo que usted tiene que usar CSS Expresión

    • Excepto en IE6 y navegadores móviles.
    • se tiene que trabajar en todos los navegadores, javascript solución es aceptada
    • la u no tiene que preocuparse demasiado acerca de ie6… ha sido considerado muerto por un largo tiempo ahora
    • Perfecto gracias
    • compruebe la simple y más efectiva solución de @13209dy de abajo.. no Pude encontrar una mejor solución para que este tan lejos
  2. 37

    Utilizar el siguiente CSS:

    .centered {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    • solución más elegante hasta el momento .. funciona en todos los cuadros de todos los tamaños y proporciones y sin personalización necesaria. Es compatible con todos los navegadores ?
    • Esto tiene un extraño efecto en el tamaño del elemento y el contenido en ella. Por ejemplo, sin left:50% el elemento se ocupan tanto espacio de ancho como sea necesario, pero con left:50%, se obtiene un tamaño de por arte de magia y se rompe el contenido en múltiples líneas.
  3. 20

    Si usted no desea cambiar su elemento en la posición fixed, aquí es una solución para mantener a tu elemento absolut.

    Desde CSS calc() es soportado por todos los navegadores ahora, aquí una solución utilizando calc().

    #main {
        width: 140px;
        height:100px;
        border: 1px solid Black;
        text-align: left;
        position: absolute;
        top: calc(50vh - (/* height */100px / 2));
        left: calc(50vw - (/* width */140px / 2)); 
    }
    • No era consciente de esto y era exactamente lo que necesitaba para este caso – gran sugerencia @Robert Hahn.
    • Perfecto para cuando usted todavía necesita el elemento absoluto. Impresionante respuesta!
    • ¿Alguien puede explicar cómo el cálculo logra lo OP que está pidiendo. Gran solución.
  4. 4

    Un poco más compleja es la utilización de múltiples cuadros de exterior. Este método funciona bien con o sin codificado anchura/altura de la media (cuadro de colores de fondo añadido sólo para mostrar lo que cada caja tiene):

    CSS:

    /* content of this box will be centered horizontally */
    .boxH
    {
      background-color: rgba(0, 127, 255, 0.2);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    /* content of this box will be centered vertically */
    .boxV
    {
      background-color: rgba(255, 0, 0, 0.2);
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    /* content of this box will be centered horizontally and vertically */
     .boxM
    {
      background-color: lightblue;
      padding: 3em;
    }

    HTML:

    <div>
      some text in the background
    </div>
    <div class="boxH">
      <div class="boxV">
        <div class="boxM">
          this div is in the middle
        </div>
      </div>
    </div>

    https://jsfiddle.net/vanowm/7cj1775e/

    Si quieres mostrar div en el centro, independientemente de la posición de desplazamiento, a continuación, cambie position a fixed

  5. 0

    Me las arreglé para colocar en posición absoluta de texto en el centro, con los siguientes:

    position: absolute;
    text-align: center;
    left: 1%;
    right: 1%;

    Esta es una variación de la respuesta de Kenneth Bregat. Mantiene absolute posicionamiento en lugar de fixed, además de que resuelve el ajuste de texto de las cuestiones mencionadas en algunas respuestas. No olvidemos que el padre de familia tendrá relative posicionamiento.

Dejar respuesta

Please enter your comment!
Please enter your name here