Center-absolute.markdown

Center absolute

Center an element with any size. Bother vertically and horizontally.

A Pen by Jeremias Dombrowsky on CodePen.

License.

index.html

<h1>Center in both directions without measuring</h1>

<div class="container"
     style="width: 200px; height: 200px; border: 1px solid grey">
  <div class="center-absolute"
       style="width: 120px; height: 50px; background-color: #ccc; padding: 5px">
  This is a block of any size.
  </div>
</div>

style.scss

@import "compass";
body {
  padding: 20px; 
}

.container {
 position: relative; 
}

.center-absolute {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}