3

我正在处理一个 CSS 动画 HTML 块。我创建了一个完全负责的网格，因此这些块具有相对大小。该块包含一个大图像，以确保在所有屏幕上正确显示内容。块中的图像具有100% 宽度的宽度以适应内容，并且它们还具有 CSS 过渡和变换。

我想将这些图像垂直居中，但只使用纯 CSS。我尝试了很多display,position和vertical-align属性的变体，但没有一个适合我。我可以轻松地使用该属性实现正确的动画background，但我不想为所有图像创建很多 css 类（即使使用 js 或 jquery 也不行）。

那么你能告诉我如何用纯 CSS解决这个问题吗？我还创建了一个jsfiddle来演示这个问题。

编辑：我也想保持块内图像的比例。

4

5 回答 5

2

我已经创建了一个水平和垂直居中位置的 codepen 示例，如果您调整它的大小，它会保持在中心。

http://codepen.io/tom-maton/pen/oqsEJ

在我的例子中

margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;

如果你只是这样做，这使它成为 h &v 定位中心

margin: auto 0;
position: absolute;
top: 0;
bottom: 0;

这将只是垂直定位

希望这可以帮助

于 2013-09-15T08:40:12.850 回答
0

你不能做你想要的既保持图像比例又让你的容器 DIV 小于图像大小，你甚至可以将图像设置height:100%为适合 DIV 内的图像或将 DIV 设置为更大的尺寸（或使用更小的图像以适合 DIV ) 并使用line-height:100%

这是第一个解决方案的演示：

演示更改比率

第二个解决方案的演示：

演示不更改比率 （我还设置了text-align:center以确保即使您不使用它也是居中的width:100%）

希望它可以帮助你。

于 2013-09-15T08:31:30.807 回答
0

您还需要定义height: 100%;。

演示

如果您使用 css 定义图像，那么它可以通过设置达到您希望的比例，background-size: cover;但对于图像这是不可能的。

于 2013-09-15T08:19:50.680 回答
0

我环顾四周，为您找到了这个链接：

CSS 技巧 - 绝对中心（垂直和水平）和图像

我希望这可以对你有所帮助

我也在你的小提琴上做过：

你的小提琴链接

我只是添加了margin-top: -100px;

编辑

抱歉没有意识到它不是固定大小的，请参阅此更新版本：

小提琴更新

我使用了以下代码：

position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 50%;
margin: -25% 0 0 -25%;

我在这里找到了它：

6种使用CSS垂直居中的方法

于 2013-09-15T08:25:13.323 回答
0

最动态的解决方案（在我看来）是使用 translateY。这会将元素从其当前位置移动：参见：CSS3 2D 变换

img {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
于 2016-02-25T14:37:22.173 回答