Centering a <div> in Next.js

Utilizing CSS flexbox or CSS grid layout, developers can easily center a <div> element in their Next.js applications.

July 27, 2023

Using Flexbox

To center a <div> element in Next.js, you can use CSS flexbox or CSS grid layout. Both methods are commonly used and straightforward to implement. Here's how to do it using both approaches:

centerDiv.module.css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust the height as needed */
}