Geekcattle Blog

There are multiple methods to achieve horizontal and vertical centering of elements in CSS. Here are several commonly used techniques:

1. Using Flexbox (Flexible Box Layout):

   .parent {
     display: flex;
     justify-content: center; /* horizontal centering */
     align-items: center; /* vertical centering */
   }

2. Using Grid (Grid Layout):

   .parent {
     display: grid;
     place-items: center; /* achieves both horizontal and vertical centering */
   }

3. Using Absolute Positioning:

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* offset by 50% to achieve centering */
   }

4. Using Table Layout:

   .parent {
     display: table;
     width: 100%;
     height: 100%;
   }
   .child {
     display: table-cell;
     text-align: center; /* horizontal centering */
     vertical-align: middle; /* vertical centering */
   }

5. Using Inline Block and Text Alignment:

   .parent {
     text-align: center;
   }
   .child {
     display: inline-block;
     vertical-align: middle;
     text-align: center;
   }

Each method has its own use cases, and you can choose the most appropriate one based on your specific layout requirements.