css图片和文字居中对齐

/* CSS 代码示例：图片和文字居中对齐 */

/* 方法一：使用 Flexbox */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度为视口高度 */
}

/* 方法二：使用 Grid */
.container {
  display: grid;
  place-items: center;     /* 同时水平和垂直居中 */
  height: 100vh;           /* 设置容器高度为视口高度 */
}

/* HTML 示例代码 */
<div class="container">
  <img src="image.jpg" alt="示例图片">
  <p>示例文字</p>
</div>

/* 解释说明：
- Flexbox 和 Grid 都是现代布局方式，可以轻松实现元素的居中对齐。
- `justify-content: center` 和 `align-items: center` 分别控制水平和垂直方向的居中。
- `place-items: center` 是 Grid 布局中的简写，同时实现水平和垂直居中。
- `height: 100vh` 确保容器的高度占满整个视口，从而让内容在视口中居中显示。 */