Centering elements in CSS is a fundamental and often essential aspect of web development. As web designers and developers, we frequently encounter the need to perfectly align text, images, buttons, and other elements both horizontally and vertically within a web page. The art of centering in CSS involves a variety of techniques that allow us to achieve this precision, each with its own unique set of advantages.

In this exploration of CSS centering techniques, we'll uncover the secrets behind achieving perfectly centered elements in web design. Whether you're a seasoned developer looking to refresh your knowledge or a newcomer seeking to grasp this fundamental skill, this journey into the world of CSS centering is bound to enhance your web design capabilities and empower you to create visually appealing and well-structured web layouts. So, let's dive in and learn how to master the art of centering elements in CSS.

In this post, we'll explore three different methods to center elements using CSS: using CSS absolute position, display Flexbox, and the display Grid.

1. Using CSS Absolute Position

a. Centering with translate

When using CSS positioning, one common approach is to use the absolute position property in combination with translate to center an element both horizontally and vertically.

HTML:

<div class="parent">
  <div class="child">Centered Element</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;  
  /* transform: translate(-50%, -50%); // old way */
}

In this method, we use the position: relative property to establish a reference for the absolute positioning of the child element. The translate property is then used to shift the element by 50% of its width and height, effectively centering it both horizontally and vertically.

b. Centering with margin: auto

Another way to center an element using CSS positioning is by setting the margin property of the element to auto. This works particularly well for centering it both horizontally and vertically.

HTML:

<div class="parent">
  <div class="child">Centered Element</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

In this case, we set position: relative on the parent container, and the margin: auto on the child element to center it within its parent.

2. Using CSS Display Flex

a. Centering with justify-content and align-items

CSS Flexbox provides an intuitive way to center elements both horizontally and vertically within a container. You can use justify-content and align-items properties to achieve this.

HTML:

<div class="parent">
  <div class="child">Centered Element</div>
</div>

CSS:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

By setting justify-content: center and align-items: center, the child element is centered both horizontally and vertically within its parent container. The child no longer needs any code to center themselves.

b. Centering with justify-content and align-self

Instead of applying justify-content and align-items to the parent element, we can individually style child elements using justify-content and align-self properties

HTML:

<div class="parent">
  <div class="child">Centered Element</div>
</div>

CSS:

.parent {
  display: flex;
  justify-content: center;
}

.child {
  align-self: center;
}

In this example, the justify-content: center property horizontally centers the child element, while the align-self: center property vertically centers it.

3. Using CSS Display Grid

a. Centering with place-items

CSS Grid provides a convenient way to center elements using the place-items property.

HTML:

<div class="parent">
  <div class="child">Centered Element</div>
</div>

CSS:

.parent {
  display: grid;
  place-items: center;
}

By using display: grid and place-items: center, the child element is centered both horizontally and vertically within the grid container.

b. Centering with margin: auto

Much like with absolute position and margin auto, you can also use the margin: auto property to center elements within a CSS Grid container.

HTML:

<div class="grid-margin">
  <div class="centered-element">Centered Element</div>
</div>

CSS:

.grid-margin {
  display: grid;
}

.centered-element {
  margin: auto;
}

In this example, margin: auto applied to the child element centers it within the Grid container.

These various techniques for centering elements in CSS provide flexibility and control over the alignment of your elements. Depending on your layout and design requirements, you can choose the method that best suits your needs. With these options at your disposal, you can achieve precise element centering in your web projects.

Try on codepen: https://codepen.io/iqbl-nrkhls/pen/oNmNYEd