Dynamic Vertical Alignment in CSS

flexbox.css

/*
  Flexbox method
  Supported in most browsers, including legacy ones like IE8 and IE9
  https://caniuse.com/#feat=flexbox
*/

html, body {
  height: 100%;
  height: auto;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  width: 100%;
}

table.css

/*
  Display Table method
  Supported in most browsers, including legacy ones like IE8 and IE9
  https://caniuse.com/#feat=css-table
*/

html, body {
  height: 100%;
  height: auto;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  display: table;
  
  height: 100%;
  width: 100%;
}

.container__content {
  display: table-cell;
  vertical-align: middle;
  
  height: 100%;
  width: 100%;
}