Cacher is the code snippet organizer for pro developers

https://css-tricks.com/centering-css-complete-guide/#center-horizontally

1. Horizontally: 

  - inline or inline-* elements (like text or links) within a block parent element:
    .center-children {
      text-align: center;
    }
    
  - block element:
    .center {
    width: 200px;
    margin: 0 auto;
    }
    
  - more block elements in a row:
    se aplica display: inline-block;
    
  - more block elements on top of each other:
    se aplica margin: 0 auto; si width: 200px;
    
2. Vertically:

  - inline or inline-* element (like text or link):
    a) equal padding above and below them:
      .link {
      padding-top: 30px;
      padding-bottom: 30px;
      }
      
    or
    
    b) !!!!!!!!!!! line-height equal to height:
      .center-text-trick {
      height: 100px;
      line-height: 100px;
      white-space: nowrap;
      }
      
  - multiple lines:
      a) equal padding above and below them
      
    or
    
      b) make parent element display: table (or even create a <table> tag) and child display: table-cell; si vertical-align: middle;
      
      .center-table {
      display: table;
      height: 250px;
      width: 240px;
      }
      
      .center-table p {
      display: table-cell;
      vertical-align: middle;
      }
      
    or 
    
      c) use flexbox (a flex-child made to center in a flex-parent), only if parent has a fixed height (px, %, etc)...
      
    or 
    
      d) the "ghost element" technique (in which a full-height pseudo-element is placed inside the container and 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;
        }
  
  -a block element:
  a)know the height of element (rarely this case):
    .parent {
    position: relative;
    }
    .child {
    posititon: absolute;
    top: 50%;
    margin-top: -50px;
    height: 100px;
    
    }
  
  b)unknown height of element:
    .parent {
    position: relative;
    }
    .child {
    posititon: absolute;
    top: 50%;
    transform: translateY(-50%);
    }
  c)use flexbox
  
3. Both Horizontally and Vertically:

a)element has fixed width and height:
  -use negative margins equal to half of that widht and height after position: absolute at 50%
b)element is of unknown width and height:
  -use transform and negative translate of 50% in both directions
c)use flexbox
d)use body, html {display:grid;} then span {margin:auto;}

Elementele cu pozitie absoluta sau fixa se centreaza astfel:

1. Pe orizontala 

- se aplica width
- se aplica left: 50%
- se aplica margin-left: -(minus) jumatate din width

Ex:

.element {
  width: 300px;
  left: 50%;
  margin-left: -150px;
}

2. Pe verticala 

- se aplica height (in situatia in care elementul nu are inaltime variabila)
- se aplica top: 50%
- se aplica margin-top: -(minus) jumatate din height

Ex:

.element {
  height: 300px;
  top: 50%;
  margin-top: -150px;
}
Obs: Daca elementul are inaltime variabila, inaltimea si marginea negativa se va calcula cu Javascript.

Pentru aceasta, containerul ce contine elementul(ex: ce contine popup) care trebuie centrat trebuie sa ocupe tot spatiul orizontal si vertical unde trebuie sa se centreze elementul, dandu-i latime si inaltime sau pozitionandu-l absolut/ fixed.

Ex: 

.container {
  position: fixed;
  left: 0;
  top: 0;
  bottom:0;
  right: 0;
  text-align: center;
  white-space: nowrap;
}
.container:before {
  content: "";
  display: inline-block;
  height: 100%;
  margin-right: -4px;
  vertical-align: middle;
}
.container .centered-element {
  display: inline-block;
  vertical-align: middle;
}

https://css-tricks.com/what-is-vertical-align/


- se aplica doar pentru elemente care nu sunt block

/*
Pentru centrarea orizontala a unui element tip block se urmeaza pasii:
1. se aplica max-width sau width
2. se aplica margin: 0 auto;

IMPORTANT: ACEST TIP DE CENTRARE FUNCTIONEAZA DOAR PT ELEMENTELE CU POZITIE STATICA SAU RELATIVA.

Ex: 

*/

.block {
  max-width: 900px;
  margin: 0 auto;
}

<style>
  .align-center {
    text-align: center; 
  }  
</style>

/*
Pentru centrarea orizontala a unui element tip inline-block or inline se aplica proprietatea text-align: center PARINTELUI cel mai apropiat de TIP BLOCK al elementului respectiv

Ex: 
*/

<div class="block-parent align-center">
  <span class="inline-block">text</span>
</div>