css 图片div内居中显示

CSS 图片 div 内居中显示是网页设计中一个经常需要用到的技巧。为了实现这个效果，我们需要理解几个概念：

首先是 display 属性。该属性用来定义元素显示类型，常见的值包括 block、inline 和 inline-block 等。其中，block 表示元素将占据整个容器的空间，而 inline 则只占据必要的空间。inline-block 则是介于两者之间的一种显示类型。

接下来是 text-align 属性。该属性可以用来水平对齐元素内的文本内容，包括 left、center 和 right 等值。

.sample {
  display: inline-block;
  text-align: center;
}

以上代码表示将 .sample 元素设置为 inline-block 显示类型，并使用 text-align 属性水平居中该元素内部的文本内容。

但是，上述样式并不适用于图片，因为图片本身是一个表现类型为 inline 的元素。因此，我们需要为图片定义一个样式，将其转换为块状元素。这可以通过 display 属性实现：

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

以上代码表示将 .sample 元素内所有的 img 标签转换为块状元素，并使用 margin 属性实现垂直居中。

通过以上的样式设置，我们可以轻松实现图片 div 内居中显示的效果。希望以上内容能够对您有所帮助。