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

Posted 2023-03-05

【中文标题】在具有动态高度的div中垂直居中图像[重复]

【英文标题】：Centering an image vertically in a div with a dynamic height [duplicate]

【发布时间】：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 的答案，它具有垂直和水平对齐方式，包括动态尺寸。

你是对的，谢谢。

【参考方案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 的图像“绝对”？究竟是怎么回事？谢谢。

通过将位置设置为绝对，边距设置为自动，顶部和底部设置为零，您可以让元素将自身垂直定位在中间。您还需要将位置设置为相对于父级，否则居中将相对于下一个定位的祖先，在本例中为主体。