垂直中心响应图像

我想知道是否有一种简单的方法来垂直居中响应图像。

请参考以下jsFiddle： http ： //jsfiddle.net/persianturtle/yawTb/1/

基本HTML：

基本CSS：

 .mobile-title-size { position: absolute; top: 2.5%; left: 6%; width: 70%; max-width: 300px; 

}

这是使用平板电脑和桌面视口上显示的相同图像的移动标题。 由于图像已经被加载了，我希望使用相同的图像，将其调整为较小并垂直对齐，以便我可以将一个图像用于所有视口。

问题：在浏览器resize时，图像会变小，但不会在中心垂直对齐。

目标：尽管在此示例中宽度严重重叠，但这不是我网站上的问题。 目标只是在浏览器resize时垂直居中图像。

我可以使用javascript / jQuery解决方案，但当然，首选简单的CSS。

任何帮助是极大的赞赏！

Answer 1

有几种方法可以做到 – 纯CSS或基于JS的方法。

---

更新的答案

更新：随着CSS转换支持的出现，这是一个使用纯CSS定位元素的相当优雅的解决方案。 使用给定的标记：

对于你的CSS：

 .container { /* The container has to have a predefined dimension though */ position: relative; } .container img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

更新了JSFiddle

---

老答案

对于CSS，您可以在元素的容器中构造ghost元素。 Chris Coyier 对这项技术做了很好的写作 。 假设您的HTML代码如下所示：

然后你的CSS将是：

 .container { font-size: 0; text-align: center; } .container:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .container > img { display: inline-block; vertical-align: middle; } 

可以看到function性CSS修复工作在这个小提琴 – http://jsfiddle.net/teddyrised/yawTb/8/

或者，您可以使用基于JS的方法：

 $(document).ready(function() { $(window).resize(function() { $(".container > img").each(function() { var cHeight = $(this).parent(".container").height(), cWidth = $(this).parent(".container").width(), iHeight = $(this).height(), iWidth = $(this).width(); $(this).css({ top: 0.5*(cHeight - iHeight), left: 0.5*(cWidth - iWidth) }); }); }).resize(); // Fires resize event when document is first loaded }); 

但是你必须使用以下CSS：

 .container { position: relative; } .container img { position: absolute; z-index: 100; } 

[编辑]：对于你绝对定位图像元素的基于JS的方法，你必须明确说明.container元素的维度，或者在其中有一些内容（但它有点失败的目的，因为图像将高于内容）。 这是因为图像元素已从文档流中取出，因此其尺寸不会影响父容器的大小。

JS版本的工作示例在这里 – http://jsfiddle.net/teddyrised/yawTb/7/

Answer 2

您已经获得的解决方案适用于旧浏览器，但在不久的将来（目前拥有大约80％的浏览器支持）您可以做到这一点，这是一个更简单，更优雅的解决方案：

 .container img{ width: 100%; height: auto; } @supports(object-fit: cover){ .container img{ height: 100%; object-fit: cover; object-position: center center; } } 

Answer 3

所以，我发现了一些完全符合我想要的东西： http ： //jsfiddle.net/fmwzT/

问题是它只适用于bootstrap的最新版本2.3.1，我不知道为什么（我的网站上有2.3.0）。

所以现在我已经回答了我的问题并提出了一个更大的问题，是什么导致这个问题起作用？

注意，它确实使用以下代码：

HTML

CSS

 #fl { float: left; } #outer-element { display: table-cell; vertical-align: middle; height: 40px; max-width: 300px; } #inner-element { display: inline-block; margin-left: -20px; } 

注意：如果没有Bootstrap的neweste 2.3.1版本，这不起作用。

我会发一个问题，看看是否有人知道！