html - vertically - position css

Texto central de CSS(horizontal y verticalmente) dentro de un bloque div

Question

Tengo un div configurado para display:block . ( 90px height y width ) y tengo algo de texto dentro.

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

He intentado text-align:center , pero no hace la parte horizontal, así que intenté vertical-align:middle pero no funcionó.

¿Algunas ideas?

Answer 1

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>

Answer 2

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 verticalmente / horizontalmente 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 los navegadores compatibles , configure la display del elemento objetivo para flex y usar elementos de align-items: center para centrado vertical y justify-content: center para centrado horizontal. Simplemente no olvide agregar prefijos de proveedores 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 / body esté establecida en 100% .

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

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

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

• Enfoque 4: posicionamiento absoluto del 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 . Simplemente posicione el elemento 50% desde arriba, en relación con el elemento principal. Use un valor de margin-top 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 método de line-height (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 valor de line-height en el elemento secundario 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 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 3 primeros.

Answer 3

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

line-height: 90px;

Answer 4

Aplicar estilo:

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

Tu texto estaría centrado independientemente de su longitud.

Answer 5

Dar esta clase 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>

Answer 6

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

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

Answer 7

Esto funciona para mi (probado ok!)

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 */
}

Puedes elegir otros valores luego 50% fi. 25% al ​​centro al 25% de los padres

Answer 8

Esto funciono para mi

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

Answer 9

Prueba el siguiente ejemplo. He añadido 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> 

Answer 10

Puedes probar 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>

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

Answer 11

Puedes probar los siguientes métodos:

1. Si tiene una sola palabra o una frase de una 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 ese id.

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.

Image

Pero, si el contenido es más de una sola palabra o una línea, esto no funciona. Además, habrá ocasiones en las que no pueda 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;
}

Image

Estas 3 líneas de código establecen el contenido exactamente en la mitad de una división (independientemente del tamaño de la pantalla). El "alinear-elementos: centro" ayuda en el centrado vertical, mientras que "justificar-contenido: centro" lo hará centrado horizontalmente.

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

Answer 12

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 de varias líneas, entonces es algo más complicado. Pero hay soluciones en http://pmob.co.uk/ Busque "alineación vertical".

Ya que tienden a ser piruetas o agregar divs complicados ... Usualmente uso 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 la transform , y funciona bien incluso en navegadores más antiguos, como IE10 e IE11. Puede soportar múltiples líneas de texto:

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

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

Para encoger envolver el ancho:

La solución anterior utilizó 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/

Intenté con flexbox, pero no era tan ampliamente compatible, ya que se rompería en algunas versiones anteriores de IE como IE10.

Answer 13

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/

Answer 14

Uno de los mejores enfoques es utilizar la propiedad flex en la división principal y agregar un margen: propiedad automática a la etiqueta del elemento

.parent{
    display: flex;
    flex-direction: column;
    flex: 1;
    height:100%;
}

p{
    margin:auto;
}

Answer 15

Utilizando 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 los elementos vertical y horizontalmente

Answer 16

añadir la display: table-cell; de la línea display: table-cell; a tu css para que div. solo las celdas de la tabla soportan el alineamiento vertical: medio; pero puedes darle esa definición [tabla-celda] a la división ...

Ejemplo 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
}

Answer 17

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}

<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>

Answer 18

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

Answer 19

#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
}

Answer 20

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

Answer 21

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        width: 100%;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p>hello world</p>
    </div>
  </body>
</html>

Answer 22

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

Answer 23

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

Answer 24

footer {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
}