Center div

Center div with css

The age-old question: How to center a DIV vertically with CSS? It can be a challenge, especially when dealing with dynamic content and different screen sizes. Fortunately, there are a few modern approaches to achieve this effect.

Here’s the HTML we will use in our examples:

<div class="container">
<div class="content">
<!-- Your content here -->
</div>
</div>

Center div with Flexbox

One of the easiest and most effective ways to center a DIV vertically with CSS is by using Flexbox. With this method, you simply set the container element to display: flex and align-items: center.

.container {
display: flex;
align-items: center;
justify-content: center; /* optional */
height: 100vh; /* optional */
}
  
.content {
/* Your content styles here */
}

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;
height: 500px; /* Set a fixed height */
}
  
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Your content styles here */
}

Center div with Grid

Additionally, 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;
align-items: center;
height: 100vh; /* Set a fixed height */
grid-template-columns: auto 1fr;
}
  
.content {
/* Your content styles here */
}