Roobendesign

How do you center two divs vertically & horizontally without flexbox?

I was putting together this landing page for one of my digital products when I ran into a problem.

My problem was about writing the HTML & CSS for the features section of my landing page.

The features section is about, you guessed it, the features of my product.

I didn’t know how I should go about creating something like the picture below.

GitHub Logo

So I got to thinking

To me, this was obviously a two-element layout. One element to the left and one to the right with the two centered in both directions.

To begin solving this problem my first question was ā€œhow do you center two containers both vertically and horizontally without using flexbox?ā€

Why I didn’t use flexbox

I know what your thinking, Just use Flexbox! and that’s exactly what I thought, but after doing some research here’s two problems I found.

  • Number one being some accessibility issues.

GitHub Logo

Flexbox Browser Support.

Flexbox is a newer technology.

I’ll explain, while flexbox is generally well-supported it doesn’t work in some older browsers and is only partially supported in some a couple of the current ones..

Here’s the main issue with that, the US has 314 million Internet Users, by choosing to only use flexbox I would have disregarded about 3 – 5 million potential visitors from the United States alone before they even got a chance to know me or my product.

Secondly and more honestly Pure Laziness

Using flexbox for this layout means I would have had to do extra work if I wanted the website to look the same across every browser.

So what his means is because flexbox only works on about 97% of all browsers that means I’d have to implement techniques like polyfills, CSS hacks, and custom stylesheets to ensure wider cross-browser support.

I don’t mind doing these tasks if theirs no other way around, but in this situation why work harder and longer when there are more reliable solutions.

By now you’re probably like ā€œjust get to the point!ā€ and I don’t blame you. So what is the better solution to centering two divs vertically and horizontally without using flexbox?

The Better Solution


Hey, I'm Ruben Gutierrez A website Designer from La Habra, California