How to Center Images & Text

How to Center Images using Margin property & Grid & Flexbox 
They go inside a img {   } or div {   } using a .class or #id or for Flexbox - display: flex;  {   }
Margin Property - also used to center a div

 img {
     display: block;
     margin: 0 auto;
    }

      /* other ways */
     margin-left:  10%;  /* auto centers, use px or % to move from the left */
     margin-right: 20%;  /* auto centers, use px or % to move from the right */

Use Grid
   .div { display: grid;
     place-items: center;  }

or

   .div { display: grid;
    align-items: center; }

To get the text and image centered horizontally you can replace the align items with "place items"
– a combination of both align-items and justify-content:

Use Flexbox
   .div { display: flex;
     justify-content: center; }


Misc Reminders
 justify-content: center;
   object-fit: contain;
    vertical-align: middle;

    

 

How to Center Text & Align Text using text-align Property & Grid & Flexbox 
They go inside a div {   } using a .class or #id or for Flexbox - display: flex  {   }  
Text-align Property
   .div {
      text-align: center; }

How to Center text with Grid
   .div { display: grid;
      place-items: center; }

or

   .div { display: grid;
      align-items: center; }

To get the text and image centered horizontally you can replace the align items with "place items"
– a combination of both align-items and justify-content:


How to Center text with Flexbox
   .flex-container {
     display: flex;

  This centers the text horizontally:
     justify-content: center;

  This centers the text vertically:
     align-items: center;