如何在div中垂直居中图像

I have a div which has a height of 100vh so that it's always the height of the browser screen. Inside of this div I want to place an image and center it vertical to its parent.

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

The height is variable so I can't use fixed margins. My current Markup is as follows:

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

HTML

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:

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;
    }

Does anybody know how to center the image vertically according to the browser height?

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

Here is the code snippet

这是代码片段

.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>

4 个解决方案

#1

I use this css snippet:

我用这个css片段：

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

Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/

适用于您的样本：https：//jsfiddle.net/nhdh8ycr/4/

#2

Centering things in CSS has been a long debated topic where people weigh all the factors and argue what the least convoluted way is.

CSS中的内容一直是一个长期争论的话题，人们在权衡所有因素并争论最错综复杂的方式。

Then in 2014, something called Flexbox came out and basically obsoleted all that.

然后在2014年，出现了一个名为Flexbox的东西，基本上已经过时了。

When a container has display: flex, there's properties to align its children. And you can anchor it in the middle on either/both axis.

当容器具有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/

It's so ubiquitously convenient I think it continues to fly under the radar because people assume it can't be so straightforward.

它是如此普遍方便我认为它继续在雷达下飞行，因为人们认为它不能那么简单。

#3

maybe this * question could help you jsfiddle

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

code is HTML

代码是HTML

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

CSS

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;
}

#4

Try this:

尝试这个：

.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>

#1