CSS: Center inner div with no outer width

dabblet.css

/* Center inner div with no outer width */
div.wrapper{
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    background: #F5F5F5;
    padding: 10px;
    margin: 0 -20px;
}
div.outer{
    clear: left;
    float: left;
    left: 50%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}
div.inner{
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
    color: #FFF;
    padding: 5px 20px;
    background: #8CC942;
}

dabblet.html

<div class="wrapper">
    <div class="outer">
        <div class="inner">Centering the DIV</div>
    </div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}