Centering an item over an image with absolute positioning and flexbox 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;
}
&lt;div class="cat"&gt;
 &lt;a href="#" class="center"&gt;I want to center this&lt;/a&gt;
 &lt;img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Cat being cool"&gt;
&lt;/div&gt;




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;
}
&lt;div class="cat"&gt;
 &lt;a href="#" class="center"&gt;I want to center this&lt;/a&gt;
 &lt;img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Cat being cool"&gt;
&lt;/div&gt;




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.
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;
}
&lt;div class="cat"&gt;
  &lt;a href="#" class="center"&gt;I want to center this&lt;/a&gt;
&lt;/div&gt;