How to centre <img> which has a z index?

Question

I am having trouble centering an image, at the moment, it stays to the left. The concept is that when I click the image, the larger version of the image pops us.

HTML:

<div class="photoposition" style="cursor:pointer" onclick="showImage('imagesinsurgent/in21.jpg');">
    <img src="imagesinsurgent/in21.jpg" class="scaledownlandscape"/>
    <p class="photogalleryp"></p>
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
    <img id="largeImg" style="height: 100%; margin: 0; padding: 0;" />
</div>

CSS:

.photoposition{
    width: 250px;
    height: 250px;
    margin-left: 53px;
    float: left;
    position: relative;
}

.scaledownlandscape{
    width: 250px;
    object-fit: scale-down;
    display: block;
    margin: 0 auto;
}

.divspan{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

#largeImgPanel {
    visibility: hidden;
    position: fixed;
    z-index: 100;
    top: 0; 
    left: 0;
    width: 500px; 
    height: 400px;
    background-color: rgba(100,100,100, 0.5);
    margin-top: 141px;
}

Javascript:

function showImage(imgName) {
    document.getElementById('largeImg').src = imgName;
    showLargeImagePanel();
    unselectAll();
}

function showLargeImagePanel() {    
    document.getElementById('largeImgPanel').style.visibility = 'visible';
}

function unselectAll() {
    if(document.selection) document.selection.empty();
    if(window.getSelection) window.getSelection().removeAllRanges();
}

function hideMe(obj) {
    obj.style.visibility = 'hidden';
}

Answer 1

Give #largeImgPanel 100% width and center align the content

#largeImgPanel {
    visibility: hidden;
    position: fixed;
    z-index: 100;
    top: 0; 
    left: 0;
    right: 0;
    width: 500px; 
    height: 400px;
    background-color: rgba(100,100,100, 0.5);
    margin-top: 141px;
    text-align: center;
}

DEMO