如何让图片相对于上层DIV始终保持水平、垂直都

在网页设计的世界中，有一个常见的挑战：如何使图片始终相对于上层DIV保持水平和垂直居中？这是一个设计技巧，也是一个美学的追求。今天，让我们一起如何通过HTML和CSS实现这一目标。

让我们从一份简单的HTML代码开始。这份代码包含了两个DIV盒子，每个盒子内都有一张图片。这些图片来源于百度和凤凰网，各具特色。我们的目标就是让这两张图片无论在哪个DIV中，都能始终保持水平和垂直居中。

以下是HTML部分：

``

``

``

``

``

``

``

接下来是展示部分：

示例一：如何让图片在DIV中始终保持居中？

`

示例一

`

示例二：再试一次，看看不同的图片如何同样保持居中。

`

示例二

`

``

``

这份代码的关键在于CSS样式中的`.thumbBox`类。通过设置`display: table-cell;`和`text-align: center;`，我们可以让图片在水平和垂直方向上都居中。而`vertical-align: middle;`确保了垂直居中的效果。通过这种方式，无论上层DIV中放入何种图片，都能保证图片始终保持在中心位置。这是一个非常实用的设计技巧，希望对你有所帮助。