center (v and h) an expanded element

It is not easy to center vertically and horizontally an expanded element in a page.

I found this code working for me:

.expansible {max-width: 10vw; 
    transition: all 1s; 
    transition:transform 0.25s ease;}
.expanded {
    max-width: 20vw;
    transform:scale(2.6);
    position: absolute;
    left: 30%;
    top: 25%;
    outline:0;
}    

The image is expended with this js code (put at the end of a file):

document.querySelectorAll('img.expansible').forEach(imageElement => {
  imageElement.addEventListener('click', e => {
    e.preventDefault()
    imageElement.classList.toggle('expanded')
  })
})

and adding the class expansible to the images you want expansible.