How to position a div in the middle of the screen when the page is bigger than the screen

html

responsive-design

flexbox

css-grid

byAlex Kataev·Aug 14, 2024

Centre a div by applying a position: fixed; with 50% for both the top and left, followed by transform: translate(-50%, -50%);.

.centered-div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  /* Div takes a step back to ensure it's in the dead center*/
}

Include this centered-div class to your div to keep it fixed and centred on any screen size.

Navigating centering techniques

Centering a div could be as intricate as finding the Higgs Boson! Here are different ways to approach it:

Playing with viewport units for responsive design

In the world of responsiveness, viewport units (vw and vh) are your best friends.

.responsive-center {
  width: 50vw; // Half the viewport width
  height: 50vh; // Half the viewport height
  position: fixed;
  top: 50%; // Pushes the div down to the middle
  left: 50%; // Pushes the div right to the middle
  transform: translate(-50%, -50%); // Pulls the div back to the exact center
}

This responsive solution adapts to changes in screen size and guarantees the div remains centered.

Going negative (with margins!)

Negative margins are a lifesaver when you know your div's specific dimensions:

.negative-margin-center {
  width: 300px; /* Width: perfect fit in a tiny spaceship */
  height: 150px; /* Height: like a good espresso, short and to the point */
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -150px; /* Negative margin left, because why not? */
  margin-top: -75px; /*Negative margin top, might as well */
}

This visually centers your div, however, it assumes width and height are fixed.

Flexbox: the king of CSS centering

Flexbox is like that super talented friend we all have who is good at almost everything:

.flexbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.flex-centered-div {
  /* Flexbox: how did we ever live without you? */
}

Wrap your div in .flexbox-container to ensure your div is eternally centered.

Don't forget about presentation!

Visibility and reader experience matter. While centering, consider:

Adding a border or background color if the div is blending too much into the background content.
Using a container div with position: relative; if your div is part of a bigger section for clearer context.
Testing your designs across different devices and browsers for compatibility.

Common Pitfalls

Even the perfect code has some thorns attached. Here's some troubleshooting:

Adjust the z-index if other elements with a higher stacking order overlap the div.
Remember position: fixed; takes an element out of the normal document flow. If your layout needs to adjust, consider using position: absolute; within a relative container.
Scrollbars might affect viewport size, offsetting your careful centering. Be aware and test thoroughly!

Other Centering Techniques

Flexbox and fixed positioning are not the only ways to center:

Using CSS Grid

Grid layout is a great alternative solution for centering:

.grid-container {
  display: grid;
  place-items: center;
  height: 100vh; // Full-height coverage
  width: 100vw;  // Full-width coverage
}

.grid-centered-div {
  /* Enter your content, Grid has got your back */
}

Just one line, place-items: center;, and your div is dead-centered.

Using Absolute Positioning

Old but gold. This classic way to center may require additional tweaks for responsive designs:

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Just like absolute vodka, it's strong and gets the job done! */
}