Overlay + Center/Right Align

Without knowing the size of the base element how can I retain it's center alignment while overlaying a box in the top corner.

HTML

<h3>Center Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter wrapme" style="width:300px"></p>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter nowrap" style="width:300px"></p>
<h3>Left Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft wrapme" style="width:300px"></p>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft nowrap" style="width:300px"></p>
<h3>Right Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright wrapme" style="width:300px"></p>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright nowrap" style="width:300px"></p>
<p><a href="https://www.flickr.com/photos/fanz/3493791131" title="Puppy by Francois de Halleux, on Flickr">Photo by Francois de Halleux via Flickr (Creative Commons by-nc-nd)</a></p>

CSS

.wrapper {
    position: relative;
    display: inline-block;
}
.aligncenter {
    text-align: center;
}
.alignleft {
    text-align: left;
}
.alignright {
    text-align: right;
}
.countbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    // has "view details" box
    $('img.wrapme').each(function () {
        $(this).wrap('<span class="wrapper"></span>');
        if ($(this).hasClass('alignright')) {
            $(this).parent().parent().addClass('alignright');
        } else if ($(this).hasClass('aligncenter')) {
            $(this).parent().parent().addClass('aligncenter');
        } else if ($(this).hasClass('alignleft')) {
            $(this).parent().parent().addClass('alignleft');
        }
        $(this).parent().append('<span class="countbox">View Details</span>');
    });
    // no  "view details" box
    $('img.nowrap').each(function () {
        $(this).wrap('<span class="wrapper"></span>');
        if ($(this).hasClass('alignright')) {
            $(this).parent().parent().addClass('alignright');
        } else if ($(this).hasClass('aligncenter')) {
            $(this).parent().parent().addClass('aligncenter');
        } else if ($(this).hasClass('alignleft')) {
            $(this).parent().parent().addClass('alignleft');
        }
    });
});