transform scale works incorrectly for odd pixel widths

Question

I am trying to scale a div, but keep the inside element at the same position and the same size. To do that, I use transform: scale(va

Answer 1

Just don't put one of these divs into another, instead put both of them into the third div like this:

.wrapper {
  width: 201px;
  height: 201px;
  position: relative;
}

.div-1 {
  width: 100%;
  height: 100%;
  background-color: blue;
}

.div-1:hover {
  transform: scale(2);
}

.div-2 {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

This way you just wont be needed to scale the inner div back to it's original height and width.