将图像居中在CSS div表上？

Question

我正在尝试做这样的事情 How to horizontally center a <div> in another <div>?

但有一个 position:absolute; div悬停在我用div创建的表格上。

这是一个jsfiddle .. http://jsfiddle.net/2ntGu/有很多事情要发生，我试着尽量减少它。

我特意寻找DEJA标志直接进入郊区和金色滴水标志的中心。这些图像也是流动的，因此无论屏幕大小如何，都会有四个水平图像。

Answer 1

由于您使用的是绝对定位，因此没有简单的方法可以做到这一点。最好的解决方案是使用包装器div设置所需的尺寸，然后将图像置于其中：

要水平居中图像，请将其设置为display: block并使用margin: 0 auto

我不知道你是否需要它也是垂直居中的，所以我添加了一个包装div并使用line-height技巧：

#wrap { margin: 0 auto; width: 400px; height: 452px; line-height: 452px }
#wrap img { vertical-align: middle; } 

Fiddle

您可以根据设计需要调整测量值以使其居中。

Answer 2

假设您只关心最新版本的浏览器，正确使用flexbox可以解决所有水平，垂直和/或多项目中心需求。

Answer 3

这并不完全正是我想要的，但这个标题标识的大小不会 变得流畅。我将宽度设置为300px，高度：自动，左边：50％，边距：0 0 0 -150px。因为left设置为50％，所以它将图像的开始加载到中途（从设计的角度来看，不是50％）因为150是300的一半，所以它保持完全居中。

哇