在具有动态高度的div中垂直居中图像[重复]答案

【问题标题】：Centering an image vertically in a div with a dynamic height [duplicate]在具有动态高度的div中垂直居中图像[重复]
【发布时间】：2015-06-01 03:06:16
【问题描述】：

我有一个 div，它是屏幕的 vh 的 1/5。我希望该 div 中的图像垂直居中。我能够将它水平居中，但到目前为止已经尝试了以下代码：

http://jsfiddle.net/ws91188y/1/

img{
  width:25px;
}

.container-fluid > div{
  text-align:center;
  height: calc(100vh/5);
}

.container-fluid > div:nth-child(odd){
  background:yellow;
}

<div class="container-fluid">
	<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
	<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
	<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
	<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
	<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
</div>

【问题讨论】：

建议的重复问题不一样。他们要求水平居中。我不是。他们的头衔问题也没有那么具体。对于固定或已知高度的 div 有很多问题。我的是动态的。建议的答案不适用于我的问题。
进一步查看标题为 Responsive Solution 的答案，它具有垂直和水平对齐方式，包括动态尺寸。
你是对的，谢谢。

标签： html css vertical-alignment viewport-units

【解决方案1】：

DEMO

添加位置：相对于容器。

.container-fluid > div {
    text-align:center;
    height: calc(100vh/5);
    position: relative;
}

然后在你的 img 上做：

img {
    width:25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

【讨论】：

【解决方案2】：

有couple of ways 可以实现这一点，但是可以通过为line-height 设置相同的值并通过vertical-align: middle 声明将中间的图像垂直对齐，如下所示：

Example Here.

img{
  width:25px;
  vertical-align: middle;
}

.container-fluid > div {
  text-align:center;
  height: calc(100vh/5);
  line-height: calc(100vh/5);
}

.container-fluid > div:nth-child(odd){
  background:yellow;
}

<div class="container-fluid">
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
</div>

【讨论】：

【解决方案3】：

你可以给父母的div相对定位和图像绝对定位：

img {
    width:25px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
}
.container-fluid > div {
    text-align:center;
    height: calc(100vh/5);
    position:relative;
}
.container-fluid > div:nth-child(odd) {
    background:yellow;
}

<div class="container-fluid">
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
</div>

【讨论】：

这很好用！谁能解释为什么我们必须给容器“相对”和顶部和底部 0 的图像“绝对”？究竟是怎么回事？谢谢。
通过将位置设置为绝对，边距设置为自动，顶部和底部设置为零，您可以让元素将自身垂直定位在中间。您还需要将位置设置为相对于父级，否则居中将相对于下一个定位的祖先，在本例中为主体。