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

我正在尝试将一个div的高度居中，但是当我调整浏览器屏幕的大小时，它不起作用

如何编辑此项以实现可调边距顶部调整大小

多谢各位

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

var h=$（window.height（）；
var parentHeight=h；
var childHeight=$（'a-middle'）.height（）；
$（'a-middle'）.css（'margin-top'，（parentHeight-childHeight）/2）；

编辑：

---

答案应该是js，因为flexbox在IE-9上不起作用，请处理当前窗口的窗口大小调整事件，并尝试将上述代码放在那里

---

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

但是您应该坚持使用CSS解决方案，有几种方法可以实现这一点

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

jsfiddle：

或者使用flexbox

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

jsfiddle：

如果要使用flex box，请使用autoprefixer获得更深入的浏览器支持：

---

对我来说，这是CSS的圣杯：） 我发现最可靠的方法是如下设置容器元素：

display: -webkit-flex;
-webkit-justify-content: center; /* horizontal */
-webkit-align-items: center; /* vertical */

它很简单，没有任何其他CSS属性的先决条件

下面的小提琴将内容放置在垂直中心上方30px处：

#容器{
宽度：500px；
高度：300px；
背景色：红色；
显示：-webkit flex；
-webkit内容：中心；
-webkit对齐项目：居中；
}
#内容{
背景颜色：绿色；
边缘底部：30px；
}

内容

对于名为“中间我”的div：

$(document).ready(centerDiv);
$(window).resize(centerDiv);

function centerDiv() {
    var winHeight = $(document).innerHeight(),
        divHeight = $('.center-me').height();

    $('.center-me').css('marginTop', (winHeight - divHeight) / 2 );
}

您需要在文档准备就绪时调用它，首先使其居中，然后在“调整大小”事件中使其居中

---

这里是它的提琴：

虽然你可以用纯CSS轻松做到这一点，但你的赏金表明你想要一个JS答案

如果您对纯CSS的答案感兴趣，请参阅它有多种不同的方法来垂直/水平居中元素

---

您可以将jQuery简化为以下内容：

$('#a-middle').css('margin-top', function () {
    return ($(window).height() - $(this).height()) / 2
});

然后，您可以将其放置在

resize

事件侦听器中，并链接

.resize（）

方法，以便在浏览器加载时最初触发事件

JavaScript等价物（不含jQuery）：

---

CSS解决方案可以为您实现这一点

div.center{
高度：100px；
宽度：300px；
最高：50%；
左：50%；
利润上限：-50px；
左边距：-150px；
位置：绝对位置；
背景色：红色；
}

---

Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut Laboure et dolore magna aliqua.

当您想要垂直和水平居中绝对位置div时，这种方法非常有用。它也适用于IE8

您需要将外部和内部div设置为

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;  

margin:auto在这种情况下，将div居中是最基本的

您还可以设置.in div的高度和宽度，但在调整浏览器大小时，仍然可以看到它垂直居中，也可以居中

* {
    margin: 0;
    padding: 0;
}
html, body {
    position: relative;
    height: 100%;
    width: 100%;
}
.in, .out {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;  
}
.in {
    background-color: red;
    height: 50%;
    width:50%;
 }
.out {
    background-color: blue;
}

示例1 JSFIDDLE高度、宽度：百分比：

示例2-JSFIDDLE固定高度、固定宽度

---

给出显示：表格单元格；到父对象，并使用“垂直对齐”垂直对齐内容，并提供填充以调整从顶部开始的必要间距

.child{
    display:table-cell;
    vertical-align:top;
    padding-top: 50px;
}

这将使整个页面的边距保持一致。

使用css

首先给你的元素一个高度

#a-middle {
    height: 20px;
    position: fixed;
    top: calc(50% - 10px);
    left: 0;
}

或者使用js

$(function(){
    $('#a-middle').each(function(){
        var t = $(window).height()/2 - $(this).outerHeight()/2;
        $(this).css({top: t + "px"});
    });
});
$(window).resize(function(){
    $('#a-middle').each(function(){
        var t = $(window).height()/2 - $(this).outerHeight()/2;
        $(this).css({top: t + "px"});
    });
});

---

以前的解决方案的问题是，如果div大于可用的垂直尺寸，则无法将其居中

如果希望div占据页面的50%，可以使用CSS垂直高度单位：

.mydiv {
   height: 50vh;
   top: 50%;
   left: 50%;
   position: fixed;
   width: 50vh;
   margin-top: -25vh;
   margin-left:-25vh;
   border: solid black 1px;
}

---

因此，您的DIV不仅将居中，而且还将保持其比率。

使用窗口和DIV的宽度和高度，使用该DIV的左侧边距和顶部边距

$(function () {
    makeDivCenter();
    $(window).resize(function () {
        makeDivCenter();
    });
});



function makeDivCenter() {
   var windowWidth = $(window).width();
   var divWidth = $(".center").width();
   var windowHeight = $(window).height();
   var divHeight = $(".center").height();

   $(".center").css({
      'margin-left': (windowWidth / 2) - (divWidth / 2) + "px",
      'margin-top': (windowHeight / 2) - (divHeight / 2) + "px"
   });
}

---

这里是jsfiddle供您参考

这可以通过使用简单的CSS实现

html，正文{
身高：100%；
}
.家长{
显示：表格；
表布局：固定；
宽度：100%；
身高：100%；
}
.孩子{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
背景：红色；
}

这总是居中的。

要使div始终保持在屏幕中央，可以在将position属性设置为absolute后使用top和left属性。但是，在调整浏览器大小时，需要动态设置这些属性。这可以使用JQuery方法-resize（）完成

/*css代码*/
.分区{
位置：绝对位置；
顶部：100px；
左：50px；
背景：黑色；
}
/*JS代码*/
函数保持分区居中（）
{
窗口高度=$（窗口）.height（）；
窗口宽度=$（窗口）.width（）；
对象高度=$（'.keepincenter'）.height（）；
对象宽度=$（'.keepincenter'）.width（）；
$（'.keepincenter'）.css（'顶部'，（窗口高度/2）-（对象高度/2））.css（'左侧'，（窗口宽度/2）-（对象宽度/2））
}
保持垂直居中（）；
$（窗口）。调整大小（函数（）{
保持垂直居中（）；
})
/*HTML代码*/

---

链接到小提琴-

您必须支持ie9吗？另一方面，您可以在不使用javascript的情况下使用flexbox：您能提供一个代码片段来显示问题吗？谢谢，但我在

#a-middle

上添加了您的第一个块，但没有起作用。这很好，谢谢。假设我想把它放在中心上方30px。如何编辑css？flexbox在ie9中不起作用，您还应该在flexbox和Transform前面加上前缀。使用margintop定义一种偏移方式，通过构建我的现有代码来实现这一点？很好的解释。如果没有Javascript，那就太棒了。

$(function(){
    $('#a-middle').each(function(){
        var t = $(window).height()/2 - $(this).outerHeight()/2;
        $(this).css({top: t + "px"});
    });
});
$(window).resize(function(){
    $('#a-middle').each(function(){
        var t = $(window).height()/2 - $(this).outerHeight()/2;
        $(this).css({top: t + "px"});
    });
});

.mydiv {
   height: 50vh;
   top: 50%;
   left: 50%;
   position: fixed;
   width: 50vh;
   margin-top: -25vh;
   margin-left:-25vh;
   border: solid black 1px;
}

$(function () {
    makeDivCenter();
    $(window).resize(function () {
        makeDivCenter();
    });
});



function makeDivCenter() {
   var windowWidth = $(window).width();
   var divWidth = $(".center").width();
   var windowHeight = $(window).height();
   var divHeight = $(".center").height();

   $(".center").css({
      'margin-left': (windowWidth / 2) - (divWidth / 2) + "px",
      'margin-top': (windowHeight / 2) - (divHeight / 2) + "px"
   });
}

/*css code*/
.div{
   position:absolute;
   top:100px;
   left:50px;
   background:black;
}

/*JS Code*/
function keep_div_centered()
{
     window_height = $(window).height();
     window_width = $(window).width();
     obj_height = $('.keepincenter').height();
     obj_width = $('.keepincenter').width();
     $('.keepincenter').css('top',(window_height/2)-(obj_height/2)).css('left',(window_width/2)-(obj_width/2))
}
keep_div_centered();
$(window).resize(function(){
     keep_div_centered();
})

/* HTML Code */
<div class="keepincenter"></div>