css - texto - ¿Cómo centrar verticalmente el contenido con altura variable dentro de un div?

centrar texto vertical y horizontal css

Question

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

Answer 1

El mejor resultado para mí hasta ahora:

div para estar centrado:

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

Answer 2

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>  

Prueba esto por ti mismo.

Answer 3

Esta parece ser la mejor solución que he encontrado para este problema, siempre y cuando su navegador admita el ::before pseudo elemento anterior: CSS-Tricks: centrado en lo desconocido .

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

.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 4

Esto es algo que he necesitado hacer muchas veces y una solución consistente aún requiere que agregue un poco de marcado no semántico y algunos hacks específicos del navegador. Cuando obtengamos compatibilidad con el navegador para css 3 obtendrá su centrado vertical sin pecar.

Para una mejor explicación de la técnica, puedes mirar el artículo desde el que lo he adaptado , pero básicamente implica agregar un elemento extra y aplicar diferentes estilos en IE y navegadores compatibles con la position:table/table-cell en elementos que no son de tabla.

<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 (hacks) para aplicar estilos en conjuntos específicos de navegadores. Usé comentarios condicionales, pero mira el artículo vinculado anteriormente para ver otras dos técnicas.

Nota: Hay formas simples de centrar verticalmente si conoce algunas alturas por adelantado, si está tratando de centrar una sola línea de texto, o en muchos otros casos. Si tiene más detalles, inclúyalos porque puede haber un método que no requiera hackers de navegador o marcas no semánticas.

Actualización: estamos empezando a obtener un mejor soporte de navegador para CSS3, incorporando tanto flex-box como transformaciones como métodos alternativos para obtener el centrado vertical (entre otros efectos). Consulte esta otra pregunta para obtener más información acerca de los métodos modernos, pero tenga en cuenta que el soporte del navegador aún es incompleto para CSS3.

Answer 5

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

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 6

Solo agrega

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

a la div interna.

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

Tenga en cuenta que transform y translate tienen prefijos de proveedor que no están incluidos para simplificar.

Codepen: http://codepen.io/anon/pen/ZYprdb

Answer 7

Utilizando el selector de niños, tomé la increíble respuesta de Fadi anterior y la reduje a una sola regla de CSS que puedo aplicar. Ahora todo lo que tengo que hacer es agregar el nombre de la clase contentCentered 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