Javascript 无法在图像div周围插入框

我正在尝试将图像插入框中（图中的中间一个），如下图所示：

我有以下代码：

 <div id="img-div">
        <img src="/images/NelsonM.JPG" alt="Nelson">
        <figcaption>Nelson Mandela</figcaption>
    </div>

这张图片确实在中间，但我无法按照上面的图片放置一个盒子。 有任何提示请回答！！哇:

element.style.display='grid'
element.style.alignContent='居中

如果我理解正确，您只需在父div周围画一个框，并加上边框即可

#img-div {
  border: 1px solid grey;
}

---

你是说我应该把代码添加到css中？在这个阶段，我没有在我的代码中使用“网格”，只是“divs”，它确实在图片周围放置了一个框，但是必须与上面和下面的框具有相同的宽度…如果我使用与顶部框相同的div宽度，所有的东西都会向左移动…啊，好的，如果你的图片的父元素是全宽的，那么我建议给你的图片标签

margin:o auto