Mastering Bidirectional Centering in CSS

The Pain of Centering Objects

Centering objects in CSS layouts can be a daunting task, especially when it comes to centering on the vertical axis. 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.

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.

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.

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

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.

<div class="hero-container">
  <h1>Hero Section</h1>
  <p>This is the hero section content.</p>
</div>

.hero-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f2f2f2;
}

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.

<div class="hero-container">
  <img src="image.jpg" alt="Hero Image">
  <a href="#">Learn More</a>
</div>

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

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.

.hero-container {
  display: grid;
  place-items: center;
}

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.

<div class="hero-container">
  <h1>Hero Section</h1>
  <p>This is the hero section content.</p>
  <button>Contact us</button>
</div>

.hero-container {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #f2f2f2;
}

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.

• Flexbox: Supported in Chrome, Firefox, Edge, Safari, and Opera.
• Grid: Supported in Chrome, Firefox, Edge, and Safari, with partial support in Opera.