Day Seven of Dailydose
This came up while mentoring a junior developer who was puzzled by layout inconsistencies. We explored different centring techniques and why they behave the way they do.
One real-world case was a login box that wouldn’t stay centred in all screen sizes. We tested a few methods to find the one that best respected responsiveness and minimal CSS.
Here are three standard techniques for centring a div both vertically and horizontally:
/* Flexbox */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid */
.parent {
display: grid;
place-items: center;
}
/* Margin Auto (horizontal only, needs fixed width) */
.child {
margin: 0 auto;
width: 200px;
}Each method solves a slightly different problem. margin: auto works well for horizontal centring of fixed-width elements. display: flex is more flexible and widely used, especially when vertical alignment is also needed. grid with place-items: center is concise and powerful, but less commonly used outside of fully grid-based layouts.
In mentoring or code review, I prefer starting with flexbox for its balance of clarity and control, then switching based on project constraints.
Choose the method that matches the layout’s intent and scale.