0

Estoy intentando centrar un div hijo pero no puedo cambiar en el padre la propiedad display none ya que este es un cobertor en el que se muestra una ventana emergente (ventana modale)

en el html lo defino de la siguiente manera:

<div class="cover_principal">
    <div class="ventanaL"> 
        ... 
        ... 
    </div>
</div>

en el css :

.cover_principal{
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   display: none;
   z-index: 70;
}
.ventanaL{
   background: #5B2C6F;
   color: #FFFFFF;
   border-radius: 3px;
   width: 425px;
   padding: 45px 55px;
   text-align: center;
   position: fixed;
   visibility: hidden;
   z-index: 100;
}

mediante javascript modifico las propiedades display y visibility según se necesite; en fin, mi inconveniente es que no puedo centrar la ventanaL para que visualmente aparazca en el centro tanto vertical como horizontal. Alguien ha tenido algo similar o que me pueda ayudar.

2 respuestas 2

1

Intenta lo siguiente en ventanaL:

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Saludos!

0

Probablemente sea mejor que compartas un pen o alguna imagen para tener alguna idea de lo que tienes actualmente.

Mi propuesta, solo leyendo tu pregunta, sería usar Flexbox para centrar el elemento hijo horizontal y verticalmente en el elemento padre:

.cover_principal {
  display: flex;
  justify-content: center;
  align-items: center,
}

Y nada más.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.