html里怎么将图片水平垂直居中

在HTML中将图片水平垂直居中通常可以使用CSS flexbox或grid布局。以下是两种常见的方法：

1. **Flexbox**:

   <style>
       .container {
           display: flex;
           justify-content: center; /* 水平居中 */
           align-items: center; /* 垂直居中 */
       }
       img {
           max-width: 100%; /* 防止图片超出容器 */
           height: auto;
       }
   </style>

   <div class="container">
       <img src="your-image-source.jpg" alt="Your Image">
   </div>

2. **Grid**:

   <style>
       .container {
           display: grid;
           place-items: center; /* 同时水平和垂直居中 */
       }
       img {
           max-width: 100%;
           height: auto;
       }
   </style>

   <div class="container">
       <img src="your-image-source.jpg" alt="Your Image">
   </div>

在上述代码中，`.container` 类设置了display属性为flex或grid，并通过相应的justify-content和align-items（对于flexbox）、place-items（对于grid）来实现图片的居中。