html - vertical - centrar texto en div horizontalmente

Cómo centrar el div verticalmente dentro del div padre absolutamente ubicado

Question

Estoy tratando de obtener un contenedor azul en el medio del rosa, pero parece vertical-align: middle; no hace el trabajo en ese caso.

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

Resultado:

Expectativa:

Por favor sugiera cómo puedo lograr eso.

Jsfiddle

Answer 1

Aquí hay una manera simple de usar el objeto Top.

Por ejemplo: si el tamaño absoluto del elemento es 60px.

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}

Answer 2

Centro vertical y horizontalmente:

.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

Answer 3

En primer lugar, tenga en cuenta que vertical-align solo es aplicable a celdas de tabla y elementos de nivel en línea.

Hay dos formas de lograr alineaciones verticales que pueden o no satisfacer sus necesidades. Sin embargo, te mostraré two methods de mis favoritos:

1. Usando transform y top

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

El punto clave es que un valor de porcentaje en la top es relativo a la height del bloque contenedor; Mientras que un valor porcentual en la transform s es relativo al tamaño del cuadro en sí (el cuadro delimitador).

Si experimenta problemas de representación de fuente (fuente borrosa), la solución es agregar perspective(1px) a la declaración de transform para que se convierta en:

transform: perspective(1px) translateY(-50%);

Vale la pena señalar que la transform CSS es compatible con IE9 + .

2. Usando elementos inline-block (pseudo-)

En este método, tenemos dos elementos de inline-block hermanos que están alineados verticalmente en el medio mediante vertical-align: middle declaración del vertical-align: middle .

Uno de ellos tiene una height del 100% de su elemento principal y el otro es nuestro elemento deseado cuyo que queríamos alinear en el medio.

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Finalmente, deberíamos usar uno de los métodos disponibles para eliminar la brecha entre los elementos de nivel en línea .

Answer 4

Puede hacerlo usando display:table; en padre div y display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; en niño div

<div style="display:table;">
      <div style="text-align: left;  height: 56px;  background-color: pink; display: table-cell; vertical-align: middle;">
          <div style="background-color: lightblue; ">test</div>
      </div>
  </div>

Answer 5

Puede usar display:table / table-cell;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}

<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>

Answer 6

Una solución simple adicional

HTML:

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

CSS:

#d1{
    position:absolute;
    top:100px;left:100px;
}

#d2{
    border:1px solid black;
    height:50px; width:50px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;  
}

Answer 7

Use flex blox en su div posicionado para centrar su contenido.

Ver ejemplo https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview

.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

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

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

Answer 8

Verifique esta respuesta a un problema similar.

Esta es, con mucho, la forma más fácil que he encontrado.

https://.com/a/26079837/4593442

NOTA. Usé display: -webkit-flex; en lugar de mostrar: flex; para probar dentro de safari.

NOTA. Solo soy un novato, y comparto la ayuda de alguien con experiencia clara.

Answer 9

utilizar este :

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

consulte este enlace: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/