How to Center a Div Vertically and Horizontally Using Only CSS?

Development Programming & Scripting Blueprint
,
1

Hi everyone,

I’m trying to center a <div> both vertically and horizontally in the browser window using only CSS, without relying on flexbox or grid. I’ve seen a few different methods online, but I’m not sure which one is the most reliable or widely supported.

Here’s a simplified version of my HTML:

<div class="container">
  <div class="box">Centered Box</div>
</div>

What would be the best CSS approach to center .box inside .container both ways, especially if I want it to work across most browsers, including older ones?

I’m also open to flexbox or grid solutions if that’s the recommended modern way, but I’d love to understand the differences.

Thanks in advance!