🖥️ Centering elements in CSS - 3 step-by-step methods with code

The centering of elements in CSS is therefore crucial to the aesthetic layout of a page. We will discuss three methods below, which therefore will allow you to center elements easily and accurately. Each method so contains CSS code and a description of how it works.

🎨 1. centering an element using Grid

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

A method using CSS Grid is one of the easiest ways to center an element both vertically, as well as horizontally. Just set display: grid On the container, to place-items: center took care of the rest. This method is especially useful if you design sections or components of a page with a regular layout.

Advantages:

• Simple and clear code.
• The centering works in both axes simultaneously.
• Ideal for static page layouts.

🧩 2. centering an element using Flexbox

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

Flexbox is an extremely flexible method of centering elements. Thanks to the properties of justify-content i align-items you can position the element at the center of the container both horizontal, as well as vertically. This solution is great for responsive designs, as it adapts the layout to different screen sizes.

How does it work?

• justify-content: center; - centers the element horizontally.
• align-items: center; - Centers the element vertically.

Advantages:

• It works on a variety of devices.
• You can easily modify the layout according to your needs.
• Ideal for designing dynamic pages.

🎯 3. centering an element using absolute position

.div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Method using position: absolute allows for precise centering element relative to the container. Thanks to top: 50% i left: 50% element is moved to the center, and the function transform: translate(-50%, -50%) improves positioning by moving the element back to the center.

How does it work?

• position: absolute; - positions the element relative to the nearest positioned container.
• top: 50%; left: 50%; - moves the element by half the height and width of the container.
• transform: translate(-50%, -50%); - compensates for the offset to center the element perfectly.

Advantages:

• It works independently of other elements.
• Precise positioning.
• Ideal for placing popups or dialogs in the center of the screen.

SUMMARY

🔧 Summary of methods for centering elements in CSS

💻 Knowledge of the various methods of centering elements in CSS will allow you to customize the page layout for different projects. Choose the right solution depending on your situation!

🔔 Follow our upcoming tutorials and develop your frontend skills!