/* 
 * CSS only centering methods
 *
 * All tehniques adapt the width of .inner to 
 * its content, max-with can be used to limit it.
 */

/* 
 * table centering
 *
 * [1] Makes it possible to vertical align
 * [2] Since its not in a table layout, width needs to be specified
 *     with a fall-back
 * [3] Centers the content vertically
 * [4] Centers the content horizontally
 * [5] Makes sure text-align and vertical-align work
 * [6] Resets the text-alignment to left (consider removing
 *     if contents need to be centered as well)
 */
.wrap-table {
  display: table-cell;     /* [1] */
  width: 1000px;           /* [2] */
  width: 100vw;            /* [2] */
  vertical-align: middle;  /* [3] */
  text-align: center;      /* [4] */
}

.inner-table {
  display: inline-block;   /* [5] */
  text-align: left;        /* [6] */
}

/* 
 * inline-block centering
 *
 * [1] Sets font-size to 0.0001px to avoid gaps between 
 *     the inline-block elements. Not 0 because IE7 and below
 *     somehow dislike font-size 0.
 * [2] Centers contents horizontally
 * [3] Adds a before element to vertical-align the .inner element
 * [4] Sets pseudo element to inline-block to make sure
 *     vertical-align works
 * [5] Makes sure the the element takes the full height of the wrap
 * [6] inner needs to be inline-block for vertical-align
 * [7] Resets the text-alignment to left (consider removing
 *     if contents need to be centered as well)
 * [8] Sets the font-size back to the regular font-size
 *     can be problematic when using font-size inheritance,
 *     consider a different inline-block gap avoiding technique:
 *     https://css-tricks.com/fighting-the-space-between-inline-block-elements/
 */
.wrap-inline-block {
  font-size: 0.0001px;            /* [1] */ 
  text-align: center;             /* [2] */
  &:before {                      /* [3] */
    content: '';                  /* [3] */
    display: inline-block;        /* [4] */
    vertical-align: middle;       
    height: 100%;                 /* [5] */
  }
}

.inner-inline-block {
  display: inline-block;          /* [6] */
  text-align: left;               /* [7] */
  font-size: 1rem;                /* [8] */
  vertical-align: middle;
}

/* 
 * transform centering
 *
 * [1] needs position relative or absolute in order to use
 *     top & left position
 * [2] Inline-block so the element takes the with of its content
 * [3] Puts the upper left corner to the center of the wrapping element
 *     in this case % is relative to the parent dimensions 
 * [4] translates the element back to the center. in this case % is relative
 *     to the element it self. Use autoprefixer or something to make this
 *     work wherever you want it to.
 */
.inner-transform {
  position: relative;                /* [1] */ 
  display: inline-block;             /* [2] */ 
  top: 50%; left: 50%;               /* [3] */ 
  transform: translate(-50%,-50%);   /* [4] */
}

/* 
 * flexbox centering
 *
 * [1] wrap need to be set to flex to be able to use justify-content
 * [2] Makes sure the contents are centered horizontally since the 
 *     default flexbox direction is set to row
 * [3] centers the inner element vertically
 */
.wrap-flexbox {
  display: flex;                /* [1] */ 
  justify-content: center;      /* [2] */
  align-items: center;          /* [3] */
}

/* 
 * grid centering
 *
 * [1] sets the parent to display grid
 * [2] Makes sure everything is centered on the x and y axis
 */
.wrap-grid {
  display: grid;                   /* [1] */
  place-content: center;           /* [2] */
}

/* 
 * absolute centering
 *
 * [1] sets the parent to position relative, can be absolute as well.
 *     makes sure the inner element will be relative to this one
 * [2] Places the upper left corner to the center of the wrap element
 * [3] element needs to have set dimensions to use negative margins
 * [4] placed element back to the center by pushing it up and left by half its size
 * [5] makes sure padding is conisdered in placement
 * [6] by uncommenting this you can avoid 3, 4 and 5
 */
.wrap-posabs {
  position: relative;                    /* [1] */
}
.inner-posabs {
  position: absolute;
  top: 50%; left: 50%;                   /* [2] */
  height: 200px; width: 500px;           /* [3] */
  margin: -100px 0 0 -250px;             /* [4] */
  box-sizing: border-box;                /* [5] */
  /* transform: translate(-50%,-50%); */ /* [6] */
}






/* demo stlyes, can be ignored fo centering */
@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,700i');

body {
  font-family: 'Space Mono', monospace;
  font-size: .9rem;
  line-height: 1.4;
  font-weight: 400;
  background-color: aquamarine;
  color: white;
}
a {
  color: #212121;
  &:hover {
    text-decoration: none;
  }
}

h1, h3 {
  text-align: center;
  color: white;
  font-weight: 200;
  line-height: 1.1;
}
h1 {
  font-size: 3.5rem;
  font-weight: 400;
  padding: 0 0.5em;
  font-weight: bold;
  font-style: italic;
}
h3 {
  margin-bottom: 3rem;
}
h2 {
  margin: -0.25em 0 .25em;
  font-weight: 200;
  color: HotPink;
  font-weight: bold;
  font-style: italic;
  
}
ol {
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}
/*
 * code for the demo, none of this is needed its 
 * just to visualize the  different methods
 */
.wrap {
  height: 500px;
  min-height: 500px;
  background: WhiteSmoke;
  background: repeating-linear-gradient(
    45deg,
    WhiteSmoke,
    WhiteSmoke 10px,
    aquamarine 10px,
    aquamarine 20px
  );
  color: black;
  border-top: .5rem solid hotpink;
}
.inner {
  padding: 2rem;
  background: WhiteSmoke;
  box-shadow: .5rem .5rem 0 0 hotpink;
}