What are the ways to horizontally center elements on a web page?

There are several common methods:

• text-align: For inline (inline or inline-block) elements inside a parent block. The parent should have text-align: center.

• margin: auto: For block (block) elements. The element should have a specified width (width). The browser automatically distributes the available space on the left and right.

  .element {
    width: 200px;
    margin: 0 auto;
  }
  

• Flexbox: A flexible layout system. Applied to the parent container.

  .container {
    display: flex;
    justify-content: center; /* Aligns items along the main axis (horizontally) */
  }
  

• Grid: A two-dimensional layout system. Applied to the parent container.

  .container {
    display: grid;
    justify-items: center; /* Aligns the content of cells horizontally */
  }
  

• Position: absolute and transform: For absolutely positioned elements with a known width.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Shifts the element by half its width to the left */
  }
  

• Display: table and margin: auto: Rarely used, but possible.

  .element {
    display: table;
    margin: 0 auto;
  }