1. Centering with Grid and place-content:
Using grid together with the place-content property makes centering elements on both axes a simple process. It's especially effective for larger layouts, although it's important to note that contained elements will take on the width of the widest element.
css
.container {
display: grid;
place-content: center;
}2. Flex and auto margin:
For smaller elements, like icons, you can use flex along with margin: auto to center them. Although it is easy to remember and works well in some situations, caution should be used when using asterisked selectors, and it may not be the best choice when working with overflows.
css
.container {
display: flex;
}
.container > * {
margin: self;
}3. Centering with Absolute Positions:
The absolute positions technique has stood the test of time and is ideal for elements like modals that need to overlap and stay visible. However, this method requires a relative container and can get complicated when using multiple centered elements. (This hack must be applied directly to the element you want to focus on and not the container)
css
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}4. The Definitive Solution 💜:
The most correct and recommended solution is to use flex together with align-items and justify-content set to center. This provides perfect centering both horizontally and vertically, being a robust solution without the disadvantages of other techniques.
align-items: defines the behavior of the elements across the axis opposite to the main one (if the flex-direction is column, then it would be the rows).
justify-content: defines the alignment and distribution of the elements on the main axis (if the flex-direction is column, then it would be the columns).
css
.container {
display: flex;
justify-content: center;
align-items: center;
}
.jpg "Building your Website from Scratch with Next.js. A React-Powered Development Journey")