¿Cómo centrar verticalmente contenido con altura variable dentro de un div?

Question

¿Cuál es la mejor manera de centrar verticalmente el contenido de un div cuando la altura del contenido es variable?En mi caso particular, la altura del div del contenedor es fija, pero sería genial si hubiera una solución que funcionara en los casos en que el contenedor también tiene una altura variable.Además, me encantaría una solución sin o con muy poco uso de hacks de CSS y/o marcado no semántico.

Answer 1

Solo agrega

position: relative;
top: 50%;
transform: translateY(-50%);

al div interior.

Lo que hace es mover el borde superior del div interior a la mitad de la altura del div exterior (top: 50%;) y luego el div interior hasta la mitad de su altura (transform: translateY(-50%)).Esto funcionará con position: absolute o relative.

Manten eso en mente transform y translate tienen prefijos de proveedores que no se incluyen por simplicidad.

Códigopen: http://codepen.io/anon/pen/ZYprdb

Answer 2

Esta parece ser la mejor solución que he encontrado para este problema, siempre y cuando su navegador admita la ::before pseudoelemento: Trucos CSS:Centrándose en lo desconocido.

No requiere ningún marcado adicional y parece funcionar muy bien.No pude usar el display: table método porque table Los elementos no obedecen max-height propiedad.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Answer 3

Esto es algo que he necesitado hacer muchas veces y una solución consistente aún requiere agregar un poco de marcado no semántico y algunos trucos específicos del navegador.Cuando obtengamos soporte del navegador para CSS 3, obtendrás el centrado vertical sin pecar.

Para una mejor explicación de la técnica puedes mirar el artículo del que lo adapté, pero básicamente implica agregar un elemento extra y aplicar diferentes estilos en IE y navegadores que admitan position:table\table-cell en elementos que no son de mesa.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

Hay muchas formas (trucos) de aplicar estilos en conjuntos específicos de navegadores.Utilicé comentarios condicionales, pero mire el artículo vinculado anteriormente para ver otras dos técnicas.

Nota:Hay formas sencillas de lograr el centrado vertical si conoce algunas alturas de antemano, si intenta centrar una sola línea de texto o en varios otros casos.Si tiene más detalles, introdúzcalos porque puede haber un método que no requiera hacks del navegador ni marcado no semántico.

Actualizar: Estamos empezando a obtener una mejor compatibilidad del navegador con CSS3, incorporando tanto flex-box como transformaciones como métodos alternativos para obtener el centrado vertical (entre otros efectos).Ver esta otra pregunta para obtener más información sobre los métodos modernos, pero tenga en cuenta que la compatibilidad del navegador con CSS3 aún es incompleta.

Answer 4

Usando el selector de niños, he tomado La increíble respuesta de Fadi arriba y lo reduje a una sola regla CSS que puedo aplicar.Ahora todo lo que tengo que hacer es agregar el contentCentered nombre de clase a los elementos que quiero centrar:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

CodePen bifurcado: http://codepen.io/dougli/pen/Eeysg

Answer 5

El mejor resultado para mí hasta ahora:

div a centrar:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Answer 6

Puedes usar margen automático.Con flex, el div también parece estar centrado verticalmente.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Answer 7

Esta es mi increíble solución para un div con una altura dinámica (porcentual).

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Pruebe esto usted mismo.