Centering elements is one of the most common yet sometimes challenging tasks in web design. Whether you’re building a simple landing page or a complex application, you need to ensure that key content is both horizontally and vertically centered. In this comprehensive guide, we’ll explore five different methods to center an element both vertically and horizontally using CSS. Each technique comes with clear code examples and explanations, so you can choose the best solution for your needs.

1. Center an Element Both Vertically and Horizontally with Flexbox

Flexbox is one of the most modern and widely used methods for centering content. It simplifies aligning items along both the horizontal and vertical axes with just a few CSS properties. Flexbox works by setting a container’s display property to flex, then using justify-content to center horizontally and align-items to center vertically.

Example

<!-- HTML -->
<div class="flex-container">
  <div class="center-me">Centered Content</div>
</div>

/* CSS */
.flex-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  height: 100vh;           /* Full viewport height */
  background-color: #f9f9f9;
}

Advantages

• Simplicity: Minimal code required.
• Responsiveness: Easily adapts to different screen sizes.
• Modern Support: Supported in all modern browsers.

2. Centering with CSS Grid

CSS Grid provides a powerful and two-dimensional layout system. Centering with Grid is equally straightforward and comes with the benefit of more control over both rows and columns. CSS Grid uses the display: grid property combined with the place-items property to center content both vertically and horizontally.

Example

<!-- HTML -->
<div class="grid-container">
  <div class="center-me">Centered Content</div>
</div>

/* CSS */
.grid-container {
  display: grid;
  place-items: center;  /* Shorthand for align-items and justify-items */
  height: 100vh;
  background-color: #f0f0f0;
}

Advantages

• Two-Dimensional Control: Works for layouts that need control over both rows and columns.
• Clean and Concise: place-items makes it simple to center content.
• Flexible: Easily combined with other grid properties for complex layouts.

3. Centering with Absolute Positioning and Transform

This classic technique uses absolute positioning along with CSS transforms to center an element. By setting an element’s position to absolute and moving it 50% from the top and left, then using transform: translate(-50%, -50%) to adjust its position, the element is perfectly centered.

Example

<!-- HTML -->
<div class="relative-container">
  <div class="center-me">Centered Content</div>
</div>

/* CSS */
.relative-container {
  position: relative;
  height: 100vh;
  background-color: #ecf0f1;
}

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #2ecc71;
  color: #fff;
  border-radius: 8px;
}

Advantages

• Browser Compatibility: Works on virtually every browser.
• Predictable Layout: Provides exact control over element positioning.

4. Centering with Table-Cell

Before Flexbox and CSS Grid, using table-cell properties was a common method for centering content. Though less common today, it remains a useful technique in certain legacy scenarios. By setting a container’s display to table and its child to table-cell with vertical alignment, you can center content.

Example

<!-- HTML -->
<div class="table-container">
  <div class="table-cell">Centered Content</div>
</div>

/* CSS */
.table-container {
  display: table;
  width: 100%;
  height: 100vh;
  background-color: #bdc3c7;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 20px;
  background-color: #9b59b6;
  color: #fff;
}

Advantages

• Legacy Support: Useful for older browsers that may not support Flexbox or Grid.
• Simplicity: Straightforward for basic centering tasks.

5. Centering with Margin Auto (for Known Dimensions)

If you have an element with fixed dimensions, you can center it using absolute positioning and margin: auto. By setting the element’s position to absolute and its top, bottom, left, and right to 0, then applying margin: auto, the element is centered within its container.

Example

<!-- HTML -->
<div class="relative-container">
  <div class="fixed-size">Centered Content</div>
</div>

/* CSS */
.relative-container {
  position: relative;
  height: 100vh;
  background-color: #f1c40f;
}

.fixed-size {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: #34495e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

Advantages

• Exact Centering: Works well when dimensions are known.
• Simple Calculation: Relying on automatic margins to center content.

Centering elements both vertically and horizontally is a fundamental skill in CSS. The method you choose depends on the layout requirements, browser support, and specific use cases:

• Flexbox and CSS Grid offer modern, efficient, and responsive solutions.
• Absolute positioning with transform is a tried-and-true method.
• Table-cell and margin auto techniques are valuable in legacy scenarios or when specific conditions apply.

By understanding and mastering these techniques, you can create flexible, robust, and responsive layouts that work across all devices.

Reference: https://www.w3schools.com/css/css_align.asp

Also Read: Javascript Practical Interview Questions