Proportional size with vertical centring in CSS

Proportional size with vertical centring.css

/* Basic vertical centring (middle) */

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* Proportional size */

.container {
  position: relative;
}

.container:after {
  content: " ";
  padding-top: 100%;
  display: block;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}


/* Proportional size with vertical centring */

.container {
  position: relative;
}

.container:after {
  content: " ";
  padding-top: 100%;
  display: block;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}