如何在div中垂直居中图像

Posted 2023-03-05

【中文标题】如何在div中垂直居中图像

【英文标题】：How to center image vertically in div

【发布时间】：2018-02-26 18:59:45

【问题描述】：

我有一个高度为 100vh 的 div，因此它始终是浏览器屏幕的高度。在这个 div 中，我想放置一个图像并将其垂直于其父级居中。

高度是可变的，所以我不能使用固定边距。我目前的标记如下：

html

   <div class="textportfolio">

      <h1>This is a title</h1>

      <p class="textbio-small">
      The Roosevelt dime is the current ten-cent piece of the United States.
      </p>

      <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">

   </div>

CSS：

.textportfolio 
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh;


img.portfolio-slides-img 
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block;
    

有人知道如何根据浏览器高度垂直居中图像吗？

这里是代码sn-p

.textportfolio 
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh


img.portfolio-slides-img 
    margin-top: 15%;
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block;
    

<div class="textportfolio">
  <h1>This is a title</h1>
  
  <p class="textbio-small">
  The Roosevelt dime is the current ten-cent piece of the United States.
  </p>
  
  <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
  
  </div>

【问题讨论】：

你试过 position: absolute attibute 吗？

不太清楚你在追求什么。图像是否应该居中，并且文本位于居中图像的垂直上方或您是否要使整个文本/图像组合居中？

只有图像应该在（橙色）div内垂直居中。

这能回答你的问题吗？ How to vertically align an image inside a div

【参考方案1】：

在 CSS 中以事物为中心一直是一个争论不休的话题，人们权衡所有因素并争论最不复杂的方式是什么。

然后在 2014 年，一种叫做 Flexbox 的东西问世了，基本上已经过时了。

当容器有display: flex 时，有一些属性可以对齐它的子级。您可以将其锚定在任一/两个轴的中间。

<div id="container">
 <img src="https://i.imgur.com/i9xpVnQ.jpg" />
</div>

html, body 
  height: 100%; /* required to make body occupy the full viewport by default */


#container 
  height: 100%;
  display: flex;
  align-items: center; /* horizontal */
  justify-content: center; /* vertical */


img 
  height: 200px;

https://jsfiddle.net/5goboeey/1/

它无处不在的方便我认为它继续在雷达下飞行，因为人们认为它不可能如此简单。

【参考方案2】：

试试这个：

.textportfolio 
  font-family: "Lora", serif;
  margin: 5%;
  background: #e9cca3;
  height: 100vh;
  position: relative;


img.portfolio-slides-img 
  max-width: 40%;
  max-height: 40%;
  margin: 0 auto;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  top: 35%

<div class="textportfolio">
  <h1>This is a title</h1>

  <p class="textbio-small">
    The Roosevelt dime is the current ten-cent piece of the United States.
  </p>

  <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">

</div>

【参考方案3】：

也许这个 *** 问题可以帮助你 jsfiddle

代码是 HTML

<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

CSS

.frame 
height: 25px;      /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;

text-align: center; margin: 1em 0;

img 
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;

【讨论】：

之所以有效，是因为放置图像的 div 具有 25px 的固定高度。但我有一个可变高度（浏览器窗口）。所以不是我的问题的解决方案。

你可以按百分比使用它。

【参考方案4】：

我用这个css sn-p：

.selector 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

应用于您的示例：https://jsfiddle.net/nhdh8ycr/4/

【讨论】：

这对我有用，但我必须改为设置 position: relative;。