html - middle - Centre un DIV horizontal y verticalmente

css center image in div

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo centrar un elemento horizontal y verticalmente? 13 respuestas

¿Hay alguna manera de CENTRAR UN DIV vertical y horizontalmente pero, y eso es importante, que el contenido no se cortará cuando la ventana sea más pequeña que el contenido? El div debe tener un color de fondo y un ancho y alto.

Siempre he centrado divs con el posicionamiento absoluto y los márgenes negativos como en el ejemplo proporcionado. Pero tiene el problema de que corta el contenido en la parte superior. ¿Hay algún método para centrar el contenido div sin este problema?

Aquí tengo el ejemplo para jugar: http://jsbin.com/iquviq/1/edit

CSS:

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
    <div class="content"> some text </div>
</div>

Mi pregunta no es un duplicado de "¿Cómo centrar un elemento horizontal y verticalmente?" 1- Mi pregunta fue hecha antes. (solo revisa las fechas). 2- Mi pregunta es muy clara y en negro: "el contenido no se cortará cuando la ventana sea más pequeña que el contenido"

Answer 1

Para navegadores modernos

Cuando tienes ese lujo. También hay flexbox, pero eso no cuenta con un amplio respaldo en el momento de escribir esto.

HTML:

<div class="content">This works with any content</div>

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Codepen más con Codepen o con JSBin

Para obtener compatibilidad con el navegador anterior, busque en otro lugar de este hilo.

Answer 2

Aquí hay una demostración: http://www.w3.org/Style/Examples/007/center-example

Un método ( ejemplo de JSFiddle )

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML:

<div id="content">
    Content goes here
</div>

Otro método ( ejemplo de JSFiddle )

CSS

body, html, #wrapper {
    width: 100%;
    height: 100%
}
#wrapper {
    display: table
}
#main {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>

Answer 3

Después de probar muchas cosas, encuentro una manera que funciona. Lo comparto aquí si es útil para cualquier persona. Puedes verlo aquí funcionando: http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
    }

Answer 4

La forma legítima de hacerlo independientemente del tamaño del div para cualquier tamaño de navegador es:

   div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }

Código en vivo

Answer 5

No creo que haya una manera de hacer esto estrictamente con CSS. La razón es su calificador "importante" a la pregunta: forzar al elemento padre a expandirse con los contenidos de su hijo.

Supongo que tendrá que usar algunos bits de JavaScript para encontrar la altura del niño y hacer ajustes.

Entonces, con este HTML:

<div class="parentElement">  
  <div class="childElement">  
    ...Some Contents...  
  </div>  
</div>  

Este CSS:

.parentElement { position:relative; width:960px; } .childElement { position:absolute; top:50%; left:50%; }

Este jQuery podría ser útil:

$(''.childElement'').each(function(){
  // determine the real dimensions of the element: http://api.jquery.com/outerWidth/
  var x = $(this).outerWidth();
  var y = $(this).outerHeight();
  // adjust parent dimensions to fit child
  if($(this).parent().height() < y) {
    $(this).parent().css({height: y + ''px''});
  }
  // offset the child element using negative margins to "center" in both axes
  $(this).css({marginTop: 0-(y/2)+''px'', marginLeft: 0-(x/2)+''px''});
});

Recuerde cargar el jQ correctamente, ya sea en el cuerpo debajo de los elementos afectados o en el interior de $(document).ready(...) .

Answer 6

Puede comparar diferentes métodos muy bien explicados en esta página: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

El método que recomiendan es agregar un elemento flotante vacío antes del contenido que no se puede centrar y borrarlo. No tiene la desventaja que mencionaste.

Bifurqué tu JSBin para aplicarlo: http://jsbin.com/iquviq/7/edit

HTML

<div id="floater">
</div>

<div id="content">
  Content here
</div>

CSS

#floater {
  float: left; 
  height: 50%; 
  margin-bottom: -300px;
}

#content {
  clear: both; 
  width: 200px;
  height: 600px;
  position: relative; 
  margin: auto;
}

Answer 7

Quieres establecer el estilo

margin: auto;

Y elimine los estilos de posicionamiento (arriba, izquierda, posición)

Sé que esto se centrará horrizontaly pero no estoy seguro acerca de la vertical!