在图像周围添加边框后如何使图像在div中居中？

Question

正如您所添加的图片所示，我将 DIV 居中于网页的中心，并将 DIV 内的图像和文本也居中于网页的中心。

问题是，当我在图像周围添加 5px 白色边框时，图像的右侧超出了 DIV。我明白这是因为添加了边框，因为没有边框，图像会正确居中。

那么有没有一种方法可以在所有边上添加 5px 边框，同时在 DIV 内部的中心包含图像，而不会使图像的右侧消失？

P.S：我还是个初学者，所以如果我的问题听起来有点简单或奇怪，请原谅我。

我尝试通过相对于 DIV 大小的宽度像素来计算图像，这样我可以在添加图像周围的边框后将图像居中，并仍然将图像保留在 DIV 内。

但是我问，在处理中型大型项目时，我是否应该始终计算应该输入多少宽度像素，并正确地将边框像素添加到中心图像？

如果这是唯一的方法，当然没问题，我会计算一下。 我只是想问将来是否有更好、更有效的方法来完成这项任务。

Answer 1

在编写 CSS 来重置浏览器应用于某些元素的默认 CSS 样式时，通常应该使用此属性。

*, *::after, *::before {
    box-sizing: border-box;
}

了解CSS Box Sizing W3Schools

此外，将图像元素包装在容器 div 中也是一个很好的做法，就像这样

<div>
    <div class="img-container">
        <img src="#" alt="website banner" />
    </div>
    <h1>Never Give up, Keep pushing</h1>
    <p>No matter what happens, always keep pushing forward</p>
</div>