<img src="static/image/h.png""alt="">怎么让这个图片左右居中，margin太麻烦了

在HTML中，如果你想让图片 `<img>` 左右居中，并且避免使用 margin 属性来调整位置，可以考虑使用 CSS 的 flexbox 或 grid 布局。这里我将提供两种方法：

**方法一：使用 flexbox**
如果你有其他元素围绕着图片，你可以将它们包裹在一个容器内，然后应用 `display: flex` 并设置 `justify-content: center`：

<div class="container">
  <img src="static/image/h.png" alt="">
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center; /* 如果你想让图片也垂直居中 */
}
</style>

**方法二：使用 CSS Grid**
Grid 布局也可以轻松实现居中效果：

<div class="container">
  <img src="static/image/h.png" alt="">
</div>

<style>
.container {
  display: grid;
  place-items: center; /* 将图片放在网格的中心 */
}
</style>

在这两种方法中，`container` 区域会自动处理其内元素的居中对齐，而不需要单独给每个元素添加 margin。

相关问题：
1. 如何在不使用外边距的情况下，让图片水平居中且支持响应式设计？
2. CSS Grid 和 Flexbox 有什么区别，哪种更适合这种场景？
3. 如果图片大小不定，如何保证居中后的图片不会超出容器边界？