<!-- flexbox -->
<section class="section">
  <div class="container container--flex">
    <div class="item">
      <span class="item__text">
        flexbox method
      </span>
    </div>
  </div>
</section>

<!-- grid -->
<section class="section">
  <div class="container container--grid">
    <div class="item">
      <span class="item__text">
        grid method
      </span>
    </div>
  </div>
</section>

<!-- table -->
<section class="section">
  <div class="container container--table">
    <div class="container__cell">
      <div class="item">
        <span class="item__text">
          table method
        </span>
      </div>
    </div>
  </div>
</section>

<!-- inline-block -->
<section class="section">
  <div class="container container--inline-block">
    <div class="item">
      <span class="item__text">
        inline-block method
      </span>
    </div>
  </div>
</section>

<!-- margin -->
<section class="section">
  <div class="container container--margin">
    <div class="item">
      <span class="item__text">
        margin method
      </span>
    </div>
  </div>
</section>

<!-- translate -->
<section class="section">
  <div class="container container--translate">
    <div class="item">
      <span class="item__text">
        translate method
      </span>
    </div>
  </div>
</section>
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css);

:root {
  --font-mono: "Fira Code", Consolas, "Andale Mono WT", "Andale Mono",
  "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
  "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
  "Courier New", Courier, monospace;
  
  --color-screen: #15232d;
  --color-green: #9BD770;
  --color-green-dark: #375f1b;
  
  /* Color Assignments */
  --color-bg: var(--color-screen);
  --color-primary: var(--color-green);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-mono);
  color: var(--color-primary);
  background-color: var(--color-bg);
}

.item {
  border: 2px solid var(--color-primary);
  text-align: center;
  padding: 40px;
  max-width: 200px;
  background-color: var(--color-bg);
}

.section {
  border: 1px solid var(--color-green-dark);
  margin: 20px;
  height: calc(100vh - 40px);
  position: relative;
}

.section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  top: 50%;
  background-color: var(--color-green-dark);
  z-index: -1;
}

.section::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background-color: var(--color-green-dark);
  z-index: -1;
}

.container {
  height: 100%;
}
  
/**
 * The Important Bits
 */
  
/* flexbox */ 
.container--flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
  
/* grid */
.container--grid {
  display: grid;
  justify-content: center;
  align-items: center;
}
  
/* table */
.container--table {
  display: table;
  width: 100%;
}

/* Requires inside wrapper element as a table-cell */
.container--table  .container__cell {
  display: table-cell;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  box-sizing: content-box;
}

.container--table .item {
  margin: 0 auto; 
}
  
/* inline-block */
.container--inline-block {
  text-align: center;
  vertical-align: middle;
  /* Eliminate inline-block whitespace */
  font-size: 0;
}
    
/* Open up vertical space for child elements */
.container--inline-block::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
    
.container--inline-block .item {
  display: inline-block;
  vertical-align: middle;
  /* Reset content font size */
  font-size: 16px;
}
  
/* margin */
.container--margin .item {
  /* Requires defined height */
  height: 120px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
  
/* translate */
.container--translate .item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.