Animating / revealing content from the center

I'm trying to make a circular div expand from the center of the div to show the content inside. The content inside should not be affected by the resizing of the outer div.

See the jsfiddle here: http://jsfiddle.net/tim_m/22bnvLnn/3/

The problem with the above example is that the circle is expanding from the top left, not the middle. The content inside is beautiful. Using transform: scale () will make the content small, but should be specified and not scaled up during animation.

EDIT - Fabio's jsfiddle led me to this, which is the closest I'm looking for: http://jsfiddle.net/tim_m/wwonzr0u/2/ . The only problem is that the content seems to swell slightly during animation.

Here's my sample code:

<div class="circle">
    <div class="content">Content</div>
</div>

      

        
        
        
      

    

CSS

body {
    padding: 20px;
}

.button {
    border: 1px solid black;
    width: 100px;
    height: 20px;
    text-align: center;
}
.circle,.content {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.circle {    
    background: rgba( 99, 99, 99, 0.8 );
    border-radius: 100%;
    color: white;
    text-align: center;
    font-family: sans-serif;
    padding: 20px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    line-height: 400px;
    position: absolute;
    left: 20%;
    top: 20%;
}

.circle.show {
    width: 400px;
    height: 400px;    
    vertical-align: middle;
}

.content {
    width: 400px;
    height: 400px;
    position: absolute;
}