Center a div horizontally and vertically and keep centered when resizing the parent [duplicate]

Question

I want to center a div horizontally and vertically at all times.

I can reduce/increase the width of the window and the div will respond by always remaining in the center of the window

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

Here is a JSFiddle Example of what I have currently. But I want to keep the div centered vertically as well so if I reduce/increase the height of the window the the div will respond by staying in the middle of the window.

In regards to the example, I want to keep the blackbox vertically centered on window resize in the same way it always stays in the center horizontally.

Answer 1

You can do this with CSS tables:

JsFiddle

Markup

<div class="container">
    <div class="cent"></div>
</div>

(Relevant) CSS

html,body
{
    height: 100%;
}
body
{
   display: table; 
   margin: 0 auto;
}

.container
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
.cent
{
    height: 50px;
    width: 50px;
    background-color: black;      
}