当我调整浏览器窗口大小时如何将div保持在中心高度？

Question

我试图以高度为中心div,但是当我调整浏览器屏幕大小时它不起作用.

如何编辑它以在调整大小时实现可调节的margin-top？

谢谢

<script>    
var h = $(window).height();
var parentHeight = h;   
var childHeight = $('#a-middle').height();      
$('#a-middle').css('margin-top', (parentHeight - childHeight) /2);
</script>

编辑: 答案应该是js,因为flexbox不能在IE-9上运行

Answer 1

你应该坚持使用CSS解决方案,有几种方法可以实现这个目标

.alignVertical {
    position:relative;
    display:inline-block;
    top:50%;
    transform:translateY(-50%);
}

jsfiddle:https://jsfiddle.net/jorjmt70/

或使用flexbox

.parent {
    display:flex;
    height:100vh;
    background-color:red;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

jsfiddle:https://jsfiddle.net/mdh9h876/

如果你想使用弹性盒使用autoprefixer来获得更深入的浏览器支持:https: //github.com/postcss/autoprefixer

Answer 2

处理当前窗口的 window_resize 事件并尝试将上面的代码放在那里。

它应该为您提供预期的功能。