Равномерное перемещение div внутри сетки ⇐ CSS

[Anonymous]

Как я могу сделать так, чтобы зеленый квадрат всегда располагался в центре синего квадрата. Это работает, когда я впервые нажимаю клавишу «вверх», но после этого он приземляется в разных положениях. Также я хочу, чтобы зеленый квадрат не отображался выход за пределы сетки. Как видно, я действительно новичок в программировании, и, возможно, это требует более сложного кодирования, чем я предполагал. Но наиболее распространенным советом было попробовать, погуглить и спросить на форумах. html Один Два Три Четыре Пять Шесть Семь Восемь Девять css .wrapper { отображение: линейная сетка; сетки-шаблона-строк: 100 пикселей 100 пикселей 100 пикселей; столбцы-шаблона сетки: 100 пикселей 100 пикселей 100 пикселей; граница: 2 пикселя, сплошная черная; } .один два три, .четыре, .шесть, .семь, .восемь, .девять { цвет фона: синий; граница: 1 пиксель, сплошная черная; } #пять { цвет фона: синий; граница: 1 пиксель, сплошная черная; положение: относительное; } .mun { цвет фона: зеленый; ширина: 35 пикселей; высота: 35 пикселей; позиция: центр; позиция: абсолютная; верхние: 31%; осталось: 32%; } javascript const mun = document.querySelector('.mun') пусть xAxis = 0 пусть yAxis = 0 функция управления(е) { переключатель (e.key) { случай «Стрелка влево»: хось -= 80; mun.style.left = xAxis + 'px'; перерыв; случай «СтрелкаВправо»: хось += 80; mun.style.left = xAxis + 'px'; перерыв; случай «Стрелка вверх»: ось y - = 80; mun.style.top = yAxis + 'px'; console.log(yAxis) перерыв; случай «Стрелка вниз»: ось += 80; mun.style.top =yAxis + 'px'; перерыв; } }; document.addEventListener('keydown', control)