Link to sectionCombining y-axis and x-axis translation

by p_russell

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate -->

<div id="outerWrapper">
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
</div>

CSS

#outerWrapper {
	background-color: gray;
	width: 400px; 
	height: 150px;
	position: relative;
}
div {
  width: 50%;
  height: 20%;
  background-color: skyblue;
}

.moved {
  transform: translate(-50%, -50%);
  background-color: pink;
	position: absolute;
	top: 70%; left: 50%;
}