html - vertical - Centrado absoluto de CSS

centrar texto verticalmente en celda html

Question

Recientemente me he encontrado con este método utilizado para posicionar un elemento tanto horizontal como verticalmente en el centro. Sin embargo, no pude averiguar qué está haciendo cada propiedad. ¿Alguien podría explicarme cuál es el efecto al establecer la top:0, bottom:0, left:0, right:0 ?

(Sería genial si puede explicarlo usando el término de lego o proporcionar una imagen ilustrativa).

Además, ¿para qué sirve configurar la pantalla en la mesa?

.absolute-center {
  position: absolute;
  display: table;
  height: auto;
  width: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

Answer 1

Comprueba esto ... HTML es

<p class="absolute-center"></p>

CSS es

.absolute-center {
    margin: auto;
    background: red; 
    width: 100px;
    height: 100px;
    position:absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

Answer 2

Puedes reducir el CSS a esto:

.absolute-center {
    position:absolute;
    width: 500px;
    height: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

El elemento absolute con propiedades como bottom: 0; top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; llenará todo el espacio.

Entonces, ¿cuál es el secreto / brujería aquí?

Está definiendo el ancho y la altura del elemento. Entonces, incluso si quiere llenar todo el espacio, estará limitado por su ancho y alto.

El secreto es el margin: auto , ¿por qué? Porque el elemento llenará el espacio restante con margen. De esa manera, porque tiene ancho y alto definidos, tendrá ese tamaño, pero el margen llenará el resto del contenedor / principal de la misma forma en que funciona auto , con el mismo tamaño en ambos lados.

Debido al margin:auto necesita ancho y alto definidos.

Answer 3

Solo necesita agregar posiciones superior e izquierda y agregar transformación. Si no necesita ancho fijo, no es un problema eliminar el width del CSS y también si desea texto centrado dentro de p agregar relleno, de lo contrario, elimínelo. Prueba esto:

.absolute-center {
    position:absolute;
    width: 500px;
    padding:50px 0;
    top: 50%;
    left: 50%;
    border: solid 1px red;
    text-align:center;
    transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
  display:inline-block;
  vertical-align:middle;
}

<p class="absolute-center">asdsdada</p>

Answer 4

Vamos a romperlo un poco:

Si tiene el siguiente CSS (lo aplico a su marcado actual):

.absolute-center {
    position:absolute;
    height: auto;
    margin: auto;
    background: red;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

Puede ver que el div.absolute-center llena el elemento padre completo (en este caso, el body ), simplemente configurando todas las propiedades top , bottom , right e left .

Demostración: http://jsfiddle.net/0osLv27k/

Entonces, cuando agregamos width (adicionalmente height ) al CSS anterior, el elemento está limitado a este tamaño.

Demostración: http://jsfiddle.net/0osLv27k/1/

Y finalmente el margin: auto mágico margin: auto que hace que el elemento esté centrado.

Demostración: http://jsfiddle.net/0osLv27k/2/