CSS Tips and Tricks case study's. Center an element in another block element.

_A.md

#CSS Tricks ##Center an element in a parent element

element.html

//some-page.html
<div class="container">
  <div class="element">
  </div>
</div>

style.css

//style.css

//Parent element
.container {
    height: 300px;       /* The height must be known in order for this to work */
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

.element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

style_2.css

//style.css

//Parent element
.parent {
  position: relative;
}

//child
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Here you can use a mixin to prefix if your using sass for transform */
  transform: translate(-50%, -50%);
  /* for ie8 this wont work */
}