r_mustang

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

https://codepen.io/ из https://stackoverflow.com/

Вам нужно ознакомиться с media queries в css

можно так, например

зависит от того, как вы делаете анимацию.
в большинстве случаев проблему решает перенос расчета анимации на видеокарту с помощью js библиотек, либо использования подходящих css параметров, типа transform3D