css图片文字居中对齐

/* 对于内联元素 */
.text-center {
  text-align: center;
}

/* 对于块级元素 */
.block-center {
  margin: 0 auto;
}

/* 使用flexbox */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 使容器高度为视口高度 */
}

/* 使用grid */
.grid-container {
  display: grid;
  place-items: center;
  height: 100vh; /* 使容器高度为视口高度 */
}

/* 使用flexbox */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 使容器高度为视口高度 */
}

/* 使用grid */
.grid-container {
  display: grid;
  place-items: center;
  height: 100vh; /* 使容器高度为视口高度 */
}

img {
  display: block;
  margin: 0 auto;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 确保容器高度为视口高度 */
}

.child {
  width: 100px; /* 设置子元素的宽度 */
  height: 100px; /* 设置子元素的高度 */
}