Question

我有一个响应式设计，标题图像放在容器中。该图片具有width:100%;和height:auto;，因此当您放大视口时它会增长。我不想超过一定的高度，因此容器有一个max-height。图像仍在增长，但现在底部被切断，因为它与容器的顶部对齐。

我希望图像在其容器中保持垂直居中，以便在顶部和底部切断部分图像。结果应如下所示：

verticaly centered image

标题图片由用户上传，因此它们可能具有不同的高度，因此我无法使用特定的像素值。有没有CSS解决方案，还是我必须使用JavaScript？

以下是代码：

.wrapper {
  width: 90%;
  max-width: 600px;
  margin: 1em auto;
  background-color: #E9ADAD;
}
.container {
  text-align: center;
  height: auto;
  line-height: 200px;
  max-height: 200px;
  overflow: hidden;
}
img {
  width: 100%;
  height: auto !important;
  vertical-align: middle;
}

<div class="wrapper">
  <div class="container">
    <img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
  </div>
</div>

我准备了fiddle。

Answer 1

您可以对图像使用绝对定位，使用负顶部/底部值，margin:auto;使图像在容器中垂直居中：

.wrapper {
  width: 90%;
  max-width: 600px;
  margin: 1em auto;
  background-color: #E9ADAD;
  max-height: 200px;
}
.container {
  position:relative;
  padding-bottom:40%;
  overflow: hidden;
}
img {
  position:absolute;
  top:-50%; bottom:-50%;
  margin:auto;
  width: 100%;
  height: auto;
}

<div class="wrapper">
  <div class="container">
    <img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
  </div>
</div>

Answer 2

不久前，只有一种javascript方式可以执行此操作，但现在我们有一些css规则：object-fit和object-position

它们的工作方式与背景大小规则的涵盖范围相同，并且包含：

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

这种方法的问题是非常新的，并且还没有在ie或Edge上工作。笔在这里：http://codepen.io/vandervals/pen/MwKKrm

编辑：请注意，您需要声明图像的宽度和高度，否则它将无法正常工作。

Answer 3

＆＃13;

.wrapper {
    width: 90%;
    max-width: 600px;
    margin: 1em auto;
}
.container {
    height: 200px;
    overflow: hidden;
}
.imgWrapper {
    position: relative; 
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}
img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto;
    height: auto;
    width: 50%;
}

＆＃13;

<div class="wrapper">
    <div class="container">
        <div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
    </div>
</div>

＆＃13;

http://jsfiddle.net/ghygpw8t/5/

受到启发：https://css-tricks.com/perfect-full-page-background-image/

Answer 4

请尝试以下操作： Demo

如果图像尺寸很小，它将被安排在垂直中间，如果它的大，它将适合框。

CSS：

 .wrapper {
    width: 90%;
    max-width: 600px;
    margin: 1em auto;
}
.container {
    text-align: center;
    line-height: 200px;
    overflow: hidden;
    background-color:#ccc;
    vertical-align:middle;
    height: 200px;
    border:2px solid green;
    display: flex;
    width: 100%; 
    align-items: center;
    justify-content: center;
}
img {
    width: 100%;  
    max-height: 196px;
    border:2px solid red;    
    vertical-align: middle;
     line-height: 196px;
}

希望这就是你想要的！

Answer 5

在您想要居中的元素上。

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

在其父母身上。

.parent { transform-style: preserve-3d; }

使用polyfill渲染跨浏览器样式。

当图像高于容器时，垂直居中图像

5 个答案: