css照片怎么居中对齐

在CSS中，将图片水平和垂直居中对齐可以有多种方法，具体取决于容器的布局。以下是几种常见的方法：

1. **Flexbox布局**:
如果容器是flex容器，你可以这样做：

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }
   img {
     max-width: 100%; /* 自适应宽度 */
   }

2. **Grid布局**:
如果使用Grid，设置类似的方式：

   .container {
     display: grid;
     place-items: center; /* 同时居中 */
   }
   img {
     max-width: 100%;
   }

3. **绝对定位** (针对相对定位的父元素)：

   .parent {
     position: relative;
   }
   img {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* 阻止图片超出边框并居中 */
     max-width: 100%;
   }

4. **内联块级元素** (适用于行内元素):

   img {
     display: inline-block;
     margin: auto; /* 在行内自动居中 */
   }

注意，以上样式需要配合HTML结构应用，如`<div class="container"> <img src="image.jpg" /> </div>`。