DEV Community

Cover image for Three ways you can vertically center an element with CSS
eddynice
eddynice

Posted on

Three ways you can vertically center an element with CSS

#react #webdev #programming #productivity

The timeless query remains: How can one vertically center a DIV using CSS? This task can prove to be quite demanding, particularly when contending with varying screen sizes and dynamic content. Thankfully, several contemporary methods exist to successfully attain this desired outcome.
Here's the HTML we will use in our examples:

<div class="container">
  <div class="content">

    <p>It can be a real challenge, especially when dealing with dynamic content and varying screen sizes.</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

FLEXBOX

Flexbox is a straightforward and highly efficient technique for vertically centering a DIV using CSS. This method involves defining the container element with the properties display: flex and align-items: center.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  .content {
    text-align: center;
    padding: 20px;
    background-color: #f0f0f0;
  }
Enter fullscreen mode Exit fullscreen mode

Position and Transform

Another approach is to use position: absolute and transform: translate. This method requires you to set a fixed height on the container element.

.container {
    position: relative;
    width: 100%;
    height: 300px; /* Adjust the height as needed */
  }

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    background-color: #f0f0f0;

  }
Enter fullscreen mode Exit fullscreen mode

the html code

<div class="container">
  <div class="content">
    <h1>Centering a DIV with position: absolute and transform</h1>
    <p>This method requires setting a fixed height on the container element.</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

GRID

you can use CSS Grid to center a DIV vertically. This method involves creating a two-column grid, with the first column set to auto and the second column set to 1fr.

.container {
    display: grid;
    place-items: center;
    height: 100vh;
  }

  .content {
    text-align: center;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
Enter fullscreen mode Exit fullscreen mode

CSS Grid provides a versatile way to center content vertically and horizontally. The two-column grid is structured with the first column set to auto (which takes the content's width) and the second column set to 1fr (which takes up the remaining available space), achieving the vertical centering effect.

<div class="container">
  <div class="content">
    <h1>Centering a DIV with CSS Grid</h1>
    <p>This method involves creating a two-column grid, with the first column set to auto and the second column set to 1fr.</p>
  </div>
Enter fullscreen mode Exit fullscreen mode

Depending on your use case, any of these 3 options should work for you to vertically center that pesky element and keep your layout rendering the way you desire.

Top comments (0)