Tengo un divconjunto para display:block( 90px heighty width), y tengo algo de texto dentro.

Necesito que el texto esté alineado en el centro tanto vertical como horizontalmente.

Lo intenté text-align:center, pero no funciona en la parte horizontal, así que lo intenté vertical-align:middle, pero no funcionó.

¿Algunas ideas?

Si es 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 ser 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 ... Usualmente uso una tabla con una sola celda para hacerlo ... para hacerlo lo más simple posible.

Actualización para 2020:

A menos que necesite que funcione en navegadores anteriores como Internet Explorer 10, puede usar flexbox. Es ampliamente compatible con todos los principales navegadores actuales . Básicamente, el contenedor debe especificarse como un contenedor flexible, junto con el centrado a lo largo de su eje principal y transversal:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Para especificar un ancho fijo para el elemento secundario, que se denomina "elemento flexible":

#content {
  flex: 0 0 120px;
}

Ejemplo: http://jsfiddle.net/2woqsef1/1/

Para reducir el contenido, es aún más simple: simplemente elimine el flex: ... línea del elemento flexible y automáticamente se encogerá.

Ejemplo: http://jsfiddle.net/2woqsef1/2/

Los ejemplos anteriores se han probado en los principales navegadores, incluidos MS Edge e Internet Explorer 11.

Una nota técnica si necesita personalizarlo: dentro del elemento flexible, dado que este elemento flexible no es un contenedor flexible en sí mismo, la antigua forma de CSS sin flexbox funciona como se esperaba. Sin embargo, si agrega un elemento flexible adicional al contenedor flexible actual, los dos elementos flexibles se colocarán horizontalmente. Para hacerlos colocados verticalmente, agregue el flex-direction: column;al contenedor flexible. Así es como funciona entre un contenedor flexible y su inmediato elementos secundarios .

Existe un método alternativo para centrar: no especificando centerla distribución en el eje principal y transversal para el contenedor flexible, sino que especifica margin: autoen el elemento flexible para ocupar todo el espacio extra en las cuatro direcciones, y los márgenes distribuidos uniformemente hará que el elemento flexible se centre en todas las direcciones. Esto funciona excepto cuando hay múltiples elementos flexibles. Además, esta técnica funciona en MS Edge pero no en Internet Explorer 11.

Actualización para 2016/2017:

Se puede hacer con más frecuencia transformy funciona bien incluso en navegadores antiguos como Internet Explorer 10 e Internet Explorer 11. Puede admitir múltiples líneas de texto:

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

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

Para encoger el ancho:

La solución anterior utilizó un ancho fijo para el área de contenido. Para usar un ancho retractilado, use

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

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

Si se necesita el soporte para Internet Explorer 10, entonces flexbox no funcionará y el método anterior y el line-heightmétodo funcionarían. De lo contrario, flexbox haría el trabajo.

Técnicas comunes a partir de 2014:

• Enfoque 1 - transform translateX/ translateY:

  Ejemplo aquí / Ejemplo de pantalla completa

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

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

• Enfoque 2 - Método de Flexbox:

  Ejemplo aquí / Ejemplo de pantalla completa

  En los navegadores compatibles , configure el displayelemento de destino flexy utilícelo align-items: centerpara el centrado vertical y el justify-content: centercentrado 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 la altura del elemento html/ bodyesté establecida en 100%.

  Para la alineación vertical, establezca width/ heightto del elemento principal 100%y agregue display: table. Luego, para el elemento hijo, cambie el displaya table-celly agreguevertical-align: middle .

  Para el centrado horizontal, puede agregar text-align: centerpara centrar el texto y cualquier otro inlineelemento secundario. Alternativamente, podría usar margin: 0 autoasumiendo que el elemento está blocknivelado.

  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 asume que el texto tiene una altura conocida - en este caso, 18px. Simplemente coloque el elemento 50%desde arriba, en relación con el elemento padre. Use un margin-topvalor negativo que sea 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 unline-height valor en el elemento secundario igual a la altura fija del elemento primario.

  Aunque esta solución funcionará en algunos casos, vale la pena señalar que no funcionará cuando haya varias líneas de texto, como esta .

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

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 forma más sencilla de centrar elementos vertical y horizontalmente

Agregue la línea display: table-cell;a su contenido CSS para ese div.

Solo las celdas de la tabla admiten vertical-align: middle;, pero puede dar esa definición [table-cell] a la div ...

Un ejemplo en vivo está 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
}

Siempre uso 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/

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 Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr

Dele esta clase CSS al <div> 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>

Puede usar la flexpropiedad en el elemento primario div y agregar la margin:autopropiedad a los elementos secundarios:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Puede ver más opciones flexaquí: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Esto funciona para mí (probado bien!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Puede elegir otros valores que no sean 50%. Por ejemplo, 25% para centrarse en el 25% de los padres.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Puedes probar los siguientes métodos:

1. Si tiene una sola palabra o una oración de línea, entonces el siguiente código puede hacer el truco.

   Tener un texto dentro de una etiqueta div y darle una identificación. Defina las siguientes propiedades para esa identificación.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Nota: Asegúrese de que la propiedad de altura de línea sea la misma que la altura de la división.

   Imagen

   Pero, si el contenido es más de una sola palabra o una línea, entonces esto no funciona. Además, habrá momentos en los que no podrá especificar el tamaño de una división en px o% (cuando la división es realmente pequeña y desea que el contenido esté exactamente en el medio).

2. Para resolver este problema, podemos probar la siguiente combinación de propiedades.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   Imagen

   Estas 3 líneas de código establecen el contenido exactamente en el medio de una división (independientemente del tamaño de la pantalla). El "align-items: center" ayuda en el centrado vertical mientras que "justify-content: center" lo hará centrado horizontalmente.

   Nota: Flex no funciona en todos los navegadores. Asegúrese de agregar los prefijos de proveedor adecuados para obtener soporte adicional del navegador.

CUADRÍCULA

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Ajuste de altura de línea para obtener la alineación vertical.

line-height: 90px;

Esta debería ser la respuesta correcta. Más limpio y simple:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Aplicar estilo:

position: absolute;
top: 50%;
left: 0;
right: 0;

Su texto estaría centrado independientemente de su longitud.

Esto funcionó para mí:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Para mí esta fue la mejor solución:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

¡Un código realmente simple que funciona para mí! Solo una línea y su texto estará centrado horizontalmente.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

El resultado se ve así:

Vote esta respuesta si funciona solo para ahorrar tiempo a los desarrolladores que buscan soluciones fáciles. ¡Gracias! :)

Prueba el siguiente ejemplo. He agregado ejemplos para cada categoría: horizontal y vertical.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>