Mastering Bidirectional Centering in CSS
When it comes to CSS layouts, we often think of page elements as boxes, and the arrangement of these boxes presents the concept of the CSS layout. Every page element has a normal position inside the document layout flow, but we often alter this default behavior to create the exact layout we want. One common task during development is centering objects inside another object within our document, which can be a daunting task, especially when it comes to centering on the vertical axis.
The Pain of Centering Objects
Over the years, centering objects has become increasingly complex, leading developers to resort to unmanageable hacks and workarounds. These hacks often cause inconsistencies in browsers, fail on screen readers, or only center objects of a specified width. The lack of a standardized approach to centering objects has led to a plethora of workarounds, each with its own set of limitations.
Introducing Bidirectional Centering
In modern CSS, we have more control over how we center objects in bidirectional layouts. Bidirectional centering literally means “two-directional centering,” where objects are centered in two directions: both horizontally (main axis) and vertically (cross axis). This approach ensures that objects remain centered, regardless of the layout flow’s direction.
Understanding Unidirectional Centering
Unidirectional centering involves centering an object either horizontally or vertically. In this case, the object’s center alignment is dependent on the direction of the layout’s flow. To better understand bidirectional centering, let’s take a look at how unidirectional centering works.
Modern Techniques for Centering Objects
We’ll explore two modern techniques for centering objects: using CSS flexbox and CSS grid. These approaches offer more flexibility and control over object centering, making them ideal for modern web development.
Object Centering Using CSS Flexbox
With CSS flexbox, we can easily control the placement of objects inside another object. By applying display: flex to a parent element, we can make the direct children flex items, allowing us to apply alignment properties to control the items. This method offers flexibility, allowing us to center multiple objects seamlessly within a container.
A Practical Example of Bidirectional Centering Using Flexbox
Let’s consider a real-life example of centering the hero section of a page using flexbox. By applying the flex and alignment properties on the parent container element, we can perfectly center the hero contents.
Centering Images and Inline Elements
This method doesn’t only work for centering text blocks; we can also center images and inline elements like anchor text links. By using the same flexbox properties, we can center content containing images and text links.
Object Centering Using CSS Grid
Like flexbox, we can apply a display: grid to a container element, making the direct children grid items. Then, we can use the alignment properties to center the content within the container. This approach offers a concise way to center objects, making it an attractive alternative to flexbox.
A Practical Example of Bidirectional Centering Using Grid
Using the same hero example as covered in the flexbox section, let’s apply the grid styles instead. We’ll see how the Contact us button takes the width of the surrounding content, demonstrating the differences between flexbox and grid.
Browser Support for Flexbox and Grid
Both flexbox and grid have excellent browser support, making them suitable for modern web development. However, grid has slightly less browser support than flexbox.
Conclusion
Instead of relying on legacy hacks, we now have modern ways to center objects using CSS flexbox and grid. By mastering these techniques, we can create flexible and maintainable layouts that scale nicely across devices and screens.