-----------------------------
How To Center Things With CSS
Disclaimer: 100% from https://medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e - visit for further explanation of what each does.
I merely found these useful and wanted to share. -rini.neocities.org 2024-09
-----------------------------

----------------------
Centering horizontally
----------------------
/* For inline elements */
text-align: center;


/* For block elements */
margin: 0 auto;

------------------------------------------
Centering both horizontally and vertically
------------------------------------------
/* Using position and transform properties */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Using viewport unit, if positioning to the main viewport */
.child {
  margin: 50vh auto 0;
  transform: translateY(-50%);
}


/* Using flexbox, first method */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Using flexbox, second method */
.parent {
  display: flex;
  min-height: 100vh;
}
.child {
  margin: auto;
}


/* Using css grid */
.parent { 
  display: grid;
  grid-template-rows: 100vh;
  grid-template-columns: 100vw;
}
.child {
  justify-self: center;
  align-self: center;
}