Cacher is the code snippet organizer for pro developers

HORIZONTAL CENERING

You can center inline elements horizontally, within a block-level parent element, with just:

.center-children {
  text-align: center;
}

This will work for inline, inline-block, inline-table, inline-flex, etc.

--------------------------------------------------------------------------------

You can center a block-level element by giving it margin-left and margin-right of auto. 
Also it has to have a set width (width=100px;), otherwise it would be full width and wouldn't need centering.

.center-me {
  margin: 0 auto;
}

This will work no matter what the width of the block level element you're centering, or the parent.
Note that you can't float an element to the center.

--------------------------------------------------------------------------------

If you have two or more block-level elements that need to be centered horizontally in a row
Make block-level elements inline-block:

.class {
  display: inline-block;
  justify-content: center;
}

################################################################################

VERTICAL CENTERING

#Single Line

Sometimes inline / text elements can appear vertically centered:

you can do that by making padding top and bottom equal:

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

  or
  
by making the line-height equal to the height will center the text:

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

--------------------------------------------------------------------------------

#Multiple Lines

Equal padding on top and bottom can give the centered effect for multiple lines of text too, 
but if that isn't going to work you can try vertical-aligne:

.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

--------------------------------------------------------------------------------

Also abother solution can be a single flex-child which was made to center in a flex-parent pretty easily.

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Remember that it's only really relevant if the parent container has a fixed height, 
which is why the container here has a height.

--------------------------------------------------------------------------------

You could employ the "ghost element" technique, in which a full-height pseudo element is placed 
inside the container and the text is vertically aligned with that.

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

--------------------------------------------------------------------------------

BLOCK-LEVEL ELEMENT with known height:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

--------------------------------------------------------------------------------

Unknown height of the element:

It's still possible to center it by poke it up half of it's height after bumping it down halfway:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

--------------------------------------------------------------------------------

If you can use flexbox you can solve the problem by:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

################################################################################

BOTH VERTICAL AND HORIZONTAL CENTERING:

Element with fixed width and height.

Using negative margins equal to half of that width and height, after you've absolutely positioned 
it at 50% / 50% will center it with great cross browser support:

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

--------------------------------------------------------------------------------

Element of unknown width and height.

If you don't know the width or height, you can use the transform property and a negative translate of 50% 
in both directions (it is based on the current width/height of the element) to center:

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

--------------------------------------------------------------------------------

Centering wit hthe flexbox

To center in both directions with flexbox, you need to use two centering properties:

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

--------------------------------------------------------------------------------

Grid option which will pretty much work for one element:

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}



Based on:
https://css-tricks.com/centering-css-complete-guide/