Pregunta Texto del centro CSS (horizontal y verticalmente) dentro de un bloque div


tengo un div ajustado a display:block. (90px  height y width) y tengo un texto dentro.

Necesito que el texto se alinee en el centro tanto vertical como horizontalmente.

Yo he tratado text-align:center, pero no hace la parte horizontal, así que lo intenté vertical-align:middle pero no funcionó.

¿Algunas ideas?


579
2018-04-18 13:22


origen


Respuestas:


Si se trata de una línea de texto y / o imagen, entonces es fácil de hacer. Solo usa

text-align: center;
vertical-align: middle;
line-height: 90px;       /* the same as your div height */

Eso es. Si puede tratarse de varias líneas, entonces es algo más complicado. Pero hay soluciones en http://pmob.co.uk/   Busque "alineación vertical".

Como tienden a ser hacks o agregar divs complicados ... suelo usar una tabla con una sola celda para hacerlo ... para hacerlo lo más simple posible.


Actualización para 2016/2017:

Se puede hacer más comúnmente con transform, y funciona bien incluso en navegadores más antiguos como IE10 e IE11. Puede admitir varias líneas de texto:

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

ejemplo: https://jsfiddle.net/wb8u02kL/1/

Para reducir el ancho del envoltorio:

La solución anterior usaba un ancho fijo para el área de contenido. Para usar un ancho de envoltura retráctil, use

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

ejemplo: https://jsfiddle.net/wb8u02kL/2/

Probé FlexBox, pero no fue tan ampliamente compatible, ya que se rompería en alguna versión anterior de IE como IE10.


948
2018-04-18 13:29



Técnicas comunes a partir de 2014:


  • Enfoque 1 - transform  translateX/translateY:

    Ejemplo aquí / Ejemplo de pantalla completa

    En navegadores compatibles (la mayoría de ellos), puedes usar top: 50%/left: 50% en combinación con translateX(-50%) translateY(-50%) para dinámicamente vertical / horizontalmente centrar el elemento.

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    

  • Enfoque 2 - Método Flexbox:

    Ejemplo aquí / Ejemplo de pantalla completa

    En navegadores compatibles, selecciona el display del elemento seleccionado para flex y use align-items: center para el centrado vertical y justify-content: center para el centrado horizontal. Simplemente no olvide agregar prefijos de proveedor para soporte adicional del navegador (ver ejemplo)

    html, body, .container {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

  • Enfoque 3 - table-cell/vertical-align: middle:

    Ejemplo aquí / Ejemplo de pantalla completa

    En algunos casos, deberá asegurarse de que html/body la altura del elemento está configurada para 100%.

    Para la alineación vertical, establezca el elemento principal width/height a 100% y añadir display: table. Luego, para el elemento secundario, cambie el display a table-cell y añadir vertical-align: middle.

    Para el centrado horizontal, puede agregar text-align: center para centrar el texto y cualquier otro inline elementos de niños. Alternativamente, podrías usar margin: 0 auto asumiendo que el elemento es block nivel.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }
    

  • Enfoque 4 - Absolutamente posicionado 50% desde la parte superior con desplazamiento:

    Ejemplo aquí / Ejemplo de pantalla completa

    Este enfoque supone que el texto tiene una altura conocida, en este caso, 18px. Basta con posicionar el elemento 50% desde arriba, en relación con el elemento padre. Use un negativo margin-top valor que es la mitad de la altura conocida del elemento, en este caso - -9px.

    html, body, .container {
        height: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .container > p {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -9px;
    }
    

  • Enfoque 5 - El line-height método (menos flexible - no sugerido):

    Ejemplo aquí

    En algunos casos, el elemento padre tendrá una altura fija. Para el centrado vertical, todo lo que tiene que hacer es establecer un line-height valor en el elemento hijo igual a la altura fija del elemento principal.

    Aunque esta solución funcionará en algunos casos, vale la pena señalar que no funcionará cuando haya múltiples líneas de texto. Me gusta esto.

    .parent {
        height: 200px;
        width: 400px;
        text-align: center;
    }
    .parent > .child {
        line-height: 200px;
    }
    

Los métodos 4 y 5 no son los más confiables. Ve con uno de los primeros 3.


376
2017-09-12 01:23



Usando flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

El CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Tomado de Consejo rápido: la manera más simple de centrar elementos vertical y horizontalmente


49
2017-11-10 03:25



agregar la línea display: table-cell; a tu CSS por ese div. solo las celdas de tabla admiten vertical-align: middle; pero puedes dar esa definición [table-cell] al div.

ejemplo en vivo aquí: http://jsfiddle.net/tH2cc/

div{
    height:90px;
    width:90px;
    text-align:center;
    border:1px solid silver;
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle; //now we can center vertically like in a TD
}

23
2018-04-18 13:28



Siempre utilizo el siguiente CSS para un contenedor, para centrar su contenido horizontal y verticalmente.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Véalo en acción aquí: https://jsfiddle.net/yp1gusn7/


12
2017-08-23 08:48



puedes probar un código muy fácil para esto

  display:flex;
  align-items: center;
  justify-content:center;

.box{
  height:90px;
  width:90px;
  background:green;
  display:flex;
  align-items: center;
  justify-content:center;
}
<div class="box">
  Lorem 
</div>

enlace codpen http://codepen.io/santoshkhalse/pen/xRmZwr


11
2017-12-16 10:07



Dale esta clase de CSS al objetivo

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* not necessary just to see the result clearly */
}
<div class="centered">This text is centered horizontally and vertically</div>


8
2017-09-11 12:41



Enfoque 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Enfoque 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Enfoque 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


6
2017-07-05 12:54