Vertically and horizontally center an element at it's parents [0,0]

by bgrins

HTML

<div class='wrap'>
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis viverra eros, sit amet elementum mauris aliquam non. Cras tincidunt, tellus eu imperdiet tempor, massa eros cursus dui, quis faucibus dolor nibh in risus. Cras non congue nisl. Quisque in dui lacus, a pretium lacus. Sed eget euismod diam. Morbi tincidunt congue commodo. Sed tristique leo sed tellus euismod in tincidunt turpis varius. Vestibulum porttitor auctor facilisis. Donec posuere luctus neque non rhoncus. Phasellus imperdiet, felis ac adipiscing tristique, arcu mi venenatis orci, et semper purus magna vitae odio. Praesent nec metus arcu, in venenatis nibh.

    
    <div class='table-wrapper'>
        <div class='table'>
            <div class='cell'>
                <div class='cell-contents'>
                    Lorem ipsum dolor sit amet.
                    <br />
                    Nullam venenatis viverra eros eros.
                </div>
            </div>
        <div>
    </div>
</div>

CSS

.wrap {
   background: #ddd;   
   border: solid 1px;
   position:relative;
   margin-left: 150px;
   margin-top: 100px;
   padding: 50px;
}

.table-wrapper {
   position:absolute;
   left: -50%;
   top: -50%;
   width: 100%;
   height: 100%;
}
.table {
   display: table;
   width: 100%;
   height: 100%;
}

.cell {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

.cell-contents {
   display:inline-block;
   text-align: left;
   background: #fdd;
   border: solid 4px;
   border-radius: 5px;
   padding: 4px;
}