Skip to main content

CSS Aligning Magic: Mastering Horizontal and Vertical Alignment

Horizontal and vertical alignment in CSS layout refer to positioning an element horizontally or vertically within its container.

Horizontal Alignment​

Center aligning an element horizontally​

To center align an element horizontally, set the margin property of the element to auto. This will automatically distribute the margin space equally on both sides of the element, centering it within its container.

As an example:

Editor

Left aligning an element​

To left-align an element, set the margin-left property of the element to 0 and the margin-right property to auto.

As an example:

Editor

Right aligning an element​

To right-align an element, set the margin-right property of the element to 0 and the margin-left property to auto.

As an example:

Editor

Vertical Alignment​

Center aligning an element vertically​

To center align an element vertically, set the display property of the container to flex, and set the align-items and justify-content properties to center.

As an example:

Editor

Top aligning an element​

To top align an element, set the align-items property of the container to flex-start.

As an example:

Editor

Bottom aligning an element​

To bottom align an element, set the align-items property of the container to flex-end.

As an example:

Editor

must define height

In order for vertical alignment to work, the container of the element must have a defined height.

Center Align Text​

An example of center align text using the text-align: center property:

Editor

In this example:

  • The text-align: center property is applied to the div element to center align the text inside it.
  • This property can be applied to any element that contains text, including headings, paragraphs, and list items.

Center an Image​

An example of center an image using the display: block and margin: auto properties:

Editor

In this example:

  • The text-align: center property is applied to the div element to center align the image container.
  • The display: block property is applied to the img element to make it a block element, which allows us to center align it using the margin: auto property.

The clearfix Hack​

The clearfix hack is a technique used in CSS to clear floated elements within a container. When you float elements inside a container, the container itself collapses to a height of 0, which can cause issues with layout and positioning.

As an example:

Editor

In this example:

  • The ::after pseudo-element is added to the container using the clearfix class.
  • The content: "" property is used to add an empty content, display: table is used to create a new block formatting context, and clear: both is used to clear the floats and force the container to expand to the height of its contents.

Center Vertically & horizontly - Using position & transform​

An example of center an element vertically and horizontally using position and transform properties:

Editor

In this example:

  • The position property is set to relative on the container and absolute on the element to position it relative to the container.
  • The top and left properties are set to 50% on the element to move it down by 50% of the container height and left by 50% of the container width.
  • The transform property is used to move the element up by 50% of its height and left by 50% of its width using the translate(-50%, -50%) value.