css - posicionamiento - posicionar div html

Elemento de centro de CSS con posición: relativo;

Question

Tengo una pregunta para ustedes gurus CSS por ahí!

Tengo un menú que aparece al pasar el mouse sobre una división absolutamente posicionada. Todos los elementos del menú deben estar relativamente posicionados porque el div absolutamente aparecerá varias veces en una página y aparecerá en varios tamaños en una instancia.

¿Cómo centraré varios elementos con ''posición: relativa'' tanto vertical como horizontalmente cuando no sabré el tamaño del div padre?

Conozco el truco de ''posición: absoluta'' con márgenes negativos, pero esta situación requiere algo diferente.

Su ayuda sería muy apreciada.

Editar:

Aquí está el código:

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

Lo tengo para centrar los elementos horizontalmente y obtener la vertical que está siendo un poco esquivo. ¡Gracias!

Answer 1

Alternativamente, también puede utilizar el modelo de caja flexible CSS3 . Es una excelente manera de crear diseños flexibles que también se pueden aplicar al contenido central como:

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}

Answer 2

Más facil:

position: relative; left: 50%;
transform: translateX(-50%);

Ahora estás centrado en tu elemento padre. También puedes hacerlo verticalmente.

Answer 3

Puedes usar calc para posicionar el elemento en relación al centro. Por ejemplo, si desea colocar el elemento 200px directamente desde el centro ... puede hacer esto:

#your_element{
    position:absolute;
    left: calc(50% + 200px);
}

No olvides esto

Cuando usa signos + y - debe tener un espacio en blanco entre el signo y el número, pero cuando usa signos * y / no hay necesidad de espacio en blanco.

Answer 4

Si tiene un div en posición relativa (o de otra manera), puede centrar algo dentro con margin:auto

El centrado vertical es un poco engañoso, pero es posible.