Question

这是我的jfiddle - fiddle，这里的一切都很完美，但只有当你最小化窗口时图像下降，需要将图像放在垂直中心，这是现在没有发生的

HTML：

<div class="left_panel">
  <div class="slide-frame">
    <img src="http://www.w3schools.com/bootstrap/paris.jpg">                        
  </div>
</div>

CSS：

.left_panel {
    border: 1px solid #ddd;
    border-collapse: collapse;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 300px;
    top: 0;
    background:#ddd;
}
.left_panel .slide-frame::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.left_panel .slide-frame{
  height: 100%;
  text-align: center;
  width: 100%;
}
.left_panel .slide-frame img {
    display: inline-block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    width: auto;
}

Answer 1

此行为的原因是，:after元素是内联元素。这会导致图像与该元素之间存在一点差距。通过将fon-size设置为零，可以消除这一差距：

.left_panel {
    font-size: 0;
}

关于该主题的好文章on CSS-Tricks。此解决方案更可取，因为您没有使用文本。对于文本，还有其他方法可以删除内联元素之间的空格。

Answer 2

请在不使用高度的情况下检查垂直和水平div。 https://jsfiddle.net/hardyrajput/myuqm5x8/2/

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 50%;
  padding: 20px;  
  color: white;
  text-align: center;
}

Answer 3

使用此

.left_panel .slide-frame {
    height: 100%;
    text-align: center;
    width: 100%;
    display: inline-table;
}

只需添加展示属性

如何在所有分辨率中垂直居中固定图像

3 个答案: