Centering web page elements using CSS has always been a challenge for web developers.
Various techniques have been used to achieve this, but now after 25 years of struggling there’s two decent options emerged: display: grid and display: flex.
In this blog post, we’ll explore the journey of centering a div, discuss these two modern approaches, and provide code examples to illustrate their usage.
The Struggle of Centering
In the early days of web development, centering elements was surprisingly difficult.
Despite its seemingly simple nature, finding a reliable and efficient solution proved to be a challenge for many developers.
As a result, several techniques emerged over time, each with its own set of advantages and drawbacks.
Tables
One of the earliest methods used to center elements was tables.
Developers would create table cells and use the align and valign attributes to center content horizontally and vertically.
However, this approach was not ideal, as tables were primarily intended for displaying tabular data, not for controlling layout.
The misuse of tables for layout purposes often led to bloated HTML and poor accessibility.
Absolute positioning
Another popular technique for centering elements was using absolute positioning.
By setting an element’s position to absolute and specifying top, right, bottom, and left values, developers could manually place the element in the center of its container.
However, this method required calculating the exact position of the centered element, and it didn’t account for dynamic content or responsive design.
Negative margins
Negative margins were also employed by setting the left and top margins to negative half the width and height of the div.
This method depended on knowing the exact dimensions of the centered element.
The Advent of display: grid
CSS Grid Layout provides web developers with precise control over two-dimensional layouts, both horizontally and vertically.
By defining rows and columns within a grid container, developers can easily create complex, responsive layouts with minimal effort.
Additionally, CSS Grid offers advanced features like subgrids, which enable nested grids to inherit sizing and positioning from their parent grids.
Code Example: Centering with Grid
To center a div using CSS Grid, follow these steps:
- Set the container’s
displayproperty togrid. - Use
place-itemsto center the div.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
place-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-div">
I'm centered!
</div>
</div>
</body>
</html>
The Rise of display: flex
CSS Flex Layout, commonly known as Flexbox, allows web developers to create one-dimensional layouts, either horizontally or vertically.
Flexbox enables developers to create flexible, responsive designs by easily aligning, distributing, and resizing items within a container.
Additionally, the system provides powerful features like flexible sizing and ordering, allowing items to grow, shrink, or change order based on available space or specific design requirements.
Code Example: Centering with Flex
To center a div using Flexbox, follow these steps:
- Set the container’s
displayproperty toflex. - Use
justify-contentandalign-itemsto center the div horizontally and vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-div">
I'm centered!
</div>
</div>
</body>
</html>
Comparing Grid and Flex: Layout complexity
When deciding whether to use CSS Grid or Flexbox for your layout, consider layout complexity.
In this section, we’ll delve deeper into the differences between these two approaches and how they handle varying levels of layout complexity.
CSS Grid: Ideal for Complex Grid Systems
CSS Grid is specifically designed for creating two-dimensional grid systems, where both rows and columns are essential. It provides a robust set of features that enable developers to manage complex layouts with ease. Some of the benefits of using CSS Grid for complex layouts include:
- Explicit Grid Definition: CSS Grid allows you to define your grid structure explicitly, providing better control over the placement and size of grid items. This makes it easier to achieve complex grid systems with irregular patterns or varying column and row sizes.
- Subgrid: The subgrid feature in CSS Grid enables nested grids to inherit the sizing and positioning of their parent grids. This is particularly useful for designing components that need to align with the main grid structure, simplifying the process of creating intricate nested layouts.
- Area-based Placement: With CSS Grid, you can name grid areas and position elements within those areas. This allows for a more semantic and organized approach to laying out content, making it easier to manage complex designs and understand the relationship between grid items.
Flexbox: Better for Simpler, One-Dimensional Layouts
Flexbox, on the other hand, is designed for one-dimensional layouts, making it an excellent choice for simpler designs that don’t require a full grid system. Flexbox excels in scenarios where you need to distribute space along a single axis, either horizontally or vertically. Some benefits of using Flexbox for less complex layouts include:
- Ease of Alignment: Flexbox provides straightforward properties such as
justify-content,align-items, andalign-self, which allow for easy alignment and distribution of items within a container. - Flexible Sizing: With Flexbox, you can use the
flexproperty to control the size of items within a container, enabling them to grow or shrink according to the available space. This is particularly useful for responsive designs and scenarios where you need to adapt the layout based on varying content lengths. - Ordering and Reordering: Flexbox allows you to control the order of items within a container without affecting the HTML source order. This can be helpful when designing responsive layouts, where the order of elements might need to change based on the screen size or other factors.
Choosing Between Grid and Flex Based
When deciding whether to use CSS Grid or Flexbox, consider the following questions:
- Do you need a full grid system with both rows and columns? If your design requires a complex, two-dimensional grid system, CSS Grid is likely the better choice. However, if your layout only involves a single axis (either horizontal or vertical), Flexbox might be more suitable.
- Will your layout have nested grids or components? If your design includes nested grid structures or components that need to align with the main grid, CSS Grid‘s subgrid feature could be invaluable. For simpler nested layouts without strict alignment requirements, Flexbox might suffice.
- How important is precise control over item placement and sizing? If your design demands granular control over item placement and sizing, CSS Grid‘s explicit grid definition and area-based placement could be advantageous. For layouts that require less control and more flexibility, Flexbox might be a better fit.
Ultimately, the choice between CSS Grid and Flexbox depends on the complexity of your layout and the specific requirements of your project.