Perfectly centered FLEXBOX using CSS with a 10% margin. Perfectly centred FLEXBOX using CSS with a 10% margin.

web-snippet-003 ( Perfectly centered FLEXBOX using CSS )

body {
    position: absolute;
    background-color: #333333;
    bottom:0;
    top:0;
    right:0;
    left: 0;
}
#blueDiv {
    position:absolute;
    bottom:10%;
    top:10%;
    right:10%;
    left: 10%;
  
    background-color: #333333;
 
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
     
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;
     
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
     
    display: box;
    box-align: center;
    box-pack: center;
    background-color: #3399FF;
}