How to center align a dynamic text using a specific point?

Question

I need to center align a dynamic text using a pre-defined point (top and left). If I use the following code, the dynamic text will left align the point.

CSS

.outer {
        display: block;
        position: relative;
        width: 100%;
        max-width: 640px;
        height: 480px;
        background-color: #EEE;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
}
.inner {
        display: block;
        position: absolute;
        min-width: 100px;
        min-height: 50px;
        padding: 20px;
}
.inner--3 {
        left: 45%;
        top: 200px;
        text-align: center;
}

HTML

<div class="outer" id="contentLayer">                    
        <div class="inner inner--3">
            Peter Wyatt
        </div>
</div>

I want to achieve Figure 1 !

I tried everything and still it gives me Figure 2 as the output! Is there anyway I can achieve this using CSS?