CenterInDiv

Center Element Inside a Div

HTML

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

CSS

.outer{
    height: 100px;
    line-height: 100px;   
    background-color: yellow;
    /*margin-top: 2px ;
    margin-bottom: 2px;*/
    padding: 0px;
}

.inner
{
    background: lime;
    color: #000;     
    height: 50px;
    line-height: 50px;
    padding: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 30px;
    margin-left: 30px;    
    display: block;
    overflow: hidden;    
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: normal;
    width: 50px;
}


.flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
        
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
        
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
        
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-align-content: center;
    align-content: center;    
}