Centering an item over an image with absolute positioning and flexbox

Question

Here's how I'd usually center align an item with absolute positioning:

img {
	width: 100%;
	height: auto;
}

.cat {
	position: relative;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background: #fff;
	padding: 12px;
}

a,
a:visited,
a:hover,
a:focus {
	color: #000;
	text-decoration: none;
}

<div class="cat">
	<a href="#" class="center">I want to center this</a>
	<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Cat being cool">
</div>

I've recently discovered that you can do the same with flexbox, like so:

img {
	width: 100%;
	height: auto;
}

.cat {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.center {
	position: absolute;
	z-index: 9999;
	background: #fff;
	padding: 12px;
}

a,
a:visited,
a:hover,
a:focus {
	color: #000;
	text-decoration: none;
}

<div class="cat">
	<a href="#" class="center">I want to center this</a>
	<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Cat being cool">
</div>

Is there any benefit to using the flexbox solution? A major downside I'm seeing is browser compatibility. I can't find a solution that purely uses flexbox.

Answer 1

Is there any benefit to using the flexbox solution?

The principal benefit will be more concise, easier-to-maintain code.

That's not to say there's anything wrong with position: absolute (there isn't). Just that with display: flex you can achieve more with less.

That is, once you have declared justify-content and align-items on a flex parent, you don't necessarily need to apply any further positioning to flex-children at all - they will automatically display in the right position, regardless of browser viewport size and dimensions.

---

IE11 isn’t playing ball.

True: https://caniuse.com/#feat=flexbox

But IE11 is from October 2013.

Even Microsoft says IE is not a browser and no-one should be using it:

https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/

---

Flex Example:

.cat {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 340px;
  height: 180px;
  background: url('https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg') 0 0 / 100% 100%;
}

.center {
  background: rgba(255, 255, 255, 0.6);
  padding: 12px;
}

<div class="cat">
  <a href="#" class="center">I want to center this</a>
</div>