Horizontal & vertical center with pure CSS (no JS, negative margins etc)

I found this on StackOverflow. A very clean way to acheive horizontal & vertical centering with pure CSS. Except I am not entirely clear how it works.

.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
    margin:auto;

    max-width:100%;
    max-height:100%;
    overflow:auto;
}

Demo