JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overflow">
    <table>
        <tr >
            <td colspan="2">
                <img class="img" src="http://ts4.mm.bing.net/th?id=HN.608050962838388827&pid=15.1" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="button2">ok</div>
            </td>
            <td>
                <div class="button1">back</div>
            </td>
        </tr>
</div>

CSS

.overflow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}
.img {
    max-width:90%;
    max-height:90%;
}
.button1 {
    color: white;
}
.button2 {
    color: white;
}
table td{
    text-align: center; 
    width: 50%;
}

table{
    position: absolute;
    width: 500px;
    height: 300px;
    left: calc(50% - 500px/2);
    top: calc(50% - 300px/2);
    table-layout: fixed;
}