Question

我想将此响应div放在页面中间（始终垂直居中），高度设置为auto（页面呈现或加载的高度）

我读过有关创建鬼元素然后将其定位的信息？我不知道如何去做，所以如果有人可以指导我会很棒！

提前致谢！

HTML

<div class="container">
    <div class="responsive"></div>
</div>

CSS

.responsive {
    width: 50%;
    height: 200px;
    margin-left: 25%;
    background: #25BF59;
}

http://jsfiddle.net/qSvAQ/55/

Answer 1

试试这个

＆＃13;

.responsive {
    width: 50%;
    height: 200px;
    margin-left: 25%;
    background: #25BF59;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

＆＃13;

<div class="container">
  <div class="responsive"></div>
</div>

＆＃13;

Answer 2

你可以使用CSS flexbox，这可以在.responsive div

上没有任何宽度设置的情况下工作

＆＃13;

.container {
  height:1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.responsive {
    width: 50%;
    height: 200px;
    background: #25BF59;
}

＆＃13;

<div class="container">
  <div class="responsive"></div>
</div>

＆＃13;

Answer 3

我经常使用Nenad描述的技术。另一种方法，如果你使用Sass并且你不打算将动画放入框中，那就是：

$width: 2em;
$height: 2em;

.container {
    position: relative;
    width: 500px; // some width;
    height: 500px; // some height;
}

.responsive {
    position: absolute;
    top: calc(50% - #{0.5*$height});
    left: calc(50% - #{0.5*$width});
    width: $width;
    height: $height;
}

Answer 4

http://jsfiddle.net/qSvAQ/57/

这个很容易，只需要3行代码：

output = uint8(repmat(mask, [1 1 3])) .* image;

创建一个始终垂直居中的div

4 个答案: