2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ What browser compatibility issues have you found? Flexbox is supported by the latest versions all major browsers. One or two may still have the odd bug. \$\endgroup\$ – Peter Jennings Oct 5 '19 at 10:28
  • \$\begingroup\$ IE11 isn’t playing ball. \$\endgroup\$ – Sam Oct 6 '19 at 0:00
4
\$\begingroup\$

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>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.