Invert font color based on centered background image - CSS

Question

I'm trying to recreate this, using CSS with the text being centered at all times and dynamically inverting the characters that are in front of a background image.

My current codepen example uses psuedo elements and attribute content, however I can't center the text to match the above image, it only works for left aligned content.

https://codepen.io/graham-cooper/pen/vYGyLeV

<div class="inverted-text-element" data-content="BOOK A VIEWING">

.inverted-text-element {
    position:relative;
    max-width:600px;
    margin:0 auto;
}

.inverted-text-element:after {
    background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
    background-size:cover;
    color:#FFFDED;
    width:240px;
    left:120px;
}

.inverted-text-element:before, .inverted-text-element:after {
    padding: 100px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    ccolor: #99794C;
    overflow: hidden;
    font-size:160px;
    content: attr(data-content);
}

Answer 1

https://jsfiddle.net/ja63f2zb/

HTML:

<div class="box">
    Lorem ipsum.
    <span>Lorem ipsum.</span>
</div>

CSS:

.box {
    width: 200px;
    margin: 200px auto;
    height: 400px;
    background-color: #CCC;
    font-size: 8em;
    position: relative;
}
.box span {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    color: #FFF;
}
.box, .box span {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

---

Just don't forget about accessibility

<div class="box">
    Lorem ipsum.
    <span aria-hidden="true">Lorem ipsum.</span>
</div>