Centering / Positioning in CSS

centering-in-the-unknown.css

/* http://css-tricks.com/centering-in-the-unknown/ */

/* This parent can be any width and height */
.block {
  text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

centering-percentage-elements.css

/* http://css-tricks.com/centering-percentage-widthheight-elements/ */

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%, -50%);
}

resize-div-maintaining-aspect-ratio.css

/* also using a ghost element: http://jsfiddle.net/jk9ubetn/ */

.container {
    width: 100%;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    background: #ff0000;
}
.container:before {
    display: block;
    content: "";
    padding-top: 66.667%;
}
.container .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ff9900;
    padding: 0;
    text-align: center;
}