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.

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.

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