In CSS, alignment refers to positioning elements horizontally or vertically within a container. The method you use depends on context—whether you're using Flexbox, Grid, or block-level/inline-level layout.

? 1. Text Alignment

text-align: left | right | center | justify;

Used to align inline content like text inside block elements.

Example:

p {  text-align: center;}

? 2. Flexbox Alignment

Use Flexbox when aligning items in a flexible layout.

Parent container:

display: flex;justify-content: center;   /* horizontal alignment */align-items: center;       /* vertical alignment */

Values for justify-content (main axis):

• flex-start

• flex-end

• center

• space-between

• space-around

• space-evenly

Values for align-items (cross axis):

• flex-start

• flex-end

• center

• stretch

• baseline

? 3. Grid Alignment

With CSS Grid:

display: grid;justify-items: center;align-items: center;

You can also use:

• justify-content and align-content for grid tracks

• place-items: center for shorthand

? 4. Positioning with Margin Auto

Used in block layout or Flex/Grid children:

margin-left: auto;margin-right: auto;

Centers a block element horizontally inside its container.

Example:

.container {  width: 300px;  margin: 0 auto;}

? 5. Absolute Positioning

position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

Perfectly centers an element both vertically and horizontally.

? 6. Vertical Alignment in Inline/Table

vertical-align: baseline | middle | top | bottom;

Used mainly with inline elements and table cells.

Need a visual layout or specific use case (e.g., centering a button in a div)?