使用箭头键滚动时，将菜单顶部设置在ul元素的中间

，可以通过以下步骤实现：

首先，需要确定ul元素的高度和可视区域的高度。可以使用CSS的height属性设置ul元素的高度，使用JavaScript的clientHeight属性获取可视区域的高度。
接下来，需要监听键盘事件，以便捕获箭头键的按下事件。可以使用JavaScript的keydown事件监听键盘按键。
在键盘事件的处理函数中，判断按下的是上箭头键还是下箭头键。可以使用JavaScript的event.keyCode属性获取按下的键码，上箭头键的键码是38，下箭头键的键码是40。
如果按下的是上箭头键，将ul元素的scrollTop属性设置为当前scrollTop减去可视区域高度的一半。这样就可以将菜单顶部设置在ul元素的中间。
如果按下的是下箭头键，将ul元素的scrollTop属性设置为当前scrollTop加上可视区域高度的一半。这样也可以将菜单顶部设置在ul元素的中间。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      height: 200px;
      overflow: auto;
    }
  </style>
</head>
<body>
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
    <li>菜单项5</li>
    <li>菜单项6</li>
    <li>菜单项7</li>
    <li>菜单项8</li>
    <li>菜单项9</li>
    <li>菜单项10</li>
  </ul>

  <script>
    var ul = document.querySelector('ul');
    var visibleHeight = ul.clientHeight;

    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 38) { // 上箭头键
        ul.scrollTop -= visibleHeight / 2;
      } else if (event.keyCode === 40) { // 下箭头键
        ul.scrollTop += visibleHeight / 2;
      }
    });
  </script>
</body>
</html>

这段代码中，ul元素的高度被设置为200px，并且使用了overflow: auto属性，以便在内容溢出时显示滚动条。键盘事件被添加到整个文档上，当按下上箭头键或下箭头键时，ul元素的scrollTop属性会相应地进行调整，从而实现将菜单顶部设置在ul元素的中间。