A Pen by Horacio Herrera.

Flexbox-Center-fixed-Content.markdown

Flexbox Center fixed Content

A Pen by Horacio Herrera on CodePen.

License.

index.haml

.container
  .center-block

style.scss

@import "compass";
html,
body
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container
{
  display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
  -webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content:center;
  -webkit-align-content: center;
  align-content: center;
  
  height: 100%;
  background: #cdcdcd;
  
  .center-block
  {
    width: 200px;
    padding: 24px;
    background: #ebebeb;
    height: 200px;
    -webkit-align-content: center;
    align-content: center;
    display: -webkit-flex;
	  display: -moz-flex;
	  display: flex;
  }
}