Pregunta Cómo centrar el div verticalmente dentro del div principal absolutamente posicionado


Estoy tratando de obtener un contenedor azul en el medio del rosado, sin embargo, 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:

enter image description here

Expectativa:

enter image description here

Por favor sugiera cómo puedo lograr eso.

Jsfiddle


74
2018-02-11 13:03


origen


Respuestas:


En primer lugar tenga en cuenta que vertical-align solo se aplica 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é dos  métodos 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 porcentual en top es relativo a la height del bloque que contiene; Mientras que un valor porcentual en transforms es relativo al tamaño del cuadro en sí (el cuadro delimitador).

Si experimentas problemas de representación de la fuente (letra borrosa), la solución es agregar perspective(1px) al transform declaración por lo que se convierte en:

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

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

2. Usando inline-block (pseudo-) elementos

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

Uno de ellos tiene un height de 100% de su padre y el otro es nuestro elemento deseado 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, debemos usar uno de los métodos disponibles para eliminar la brecha entre los elementos de nivel en línea.


177
2018-02-11 14:24



utilizar esta :

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


28
2017-11-25 10:53



Utilice flex blox en su div colocado de forma absoluta 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;
}

11
2018-06-05 21:55



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%);
}

7
2017-08-14 15:39



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


1
2018-02-11 13:10



Por favor, compruebe esta respuesta a un problema similar.

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

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

NOTA. solía pantalla: -webkit-flex; en lugar de pantalla: flexión; para probar dentro de safari.

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


1
2018-02-22 10:30



Aquí está la 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);
}

1
2018-03-20 07:46