Question

我设置了一个单页网站，我想在一个div中垂直居中一个100％视口高度的div，目前我有 -

function vertmiddle() {
    var height = $('.vertmiddle').height();
    var windowheight = $(window).height();
    var vertmiddle = ((windowheight) - (height)) / 2;
    vertmiddle = parseInt(vertmiddle) + 'px';
    $(".vertmiddle").css('margin-top',vertmiddle);
}

$(document).ready(function() {
    vertmiddle();
    $(window).bind('resize', vertmiddle);
});

编辑，这是HTLM我也使用的一个例子 -

<section id="community" class="full">
    <div class="container">
        <div class="vertmiddle">
        content
        </div>
    </div>
</section>

它工作正常，但我所有包含的div都获得相同的保证金金额，因为它们都使用相同的类，并且它只是使用页面高度上的第一个div。

我如何设置它，以便每个包含div的正确边距。我可以使用独特的类来完成这项工作，只需重复脚本，但我确信这是一种更简洁的方法。

很抱歉，如果我不清楚我在这里发布了新帖子。

感谢

Answer 1

使用此

function vertmiddle() {
  $('.vertmiddle').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$(this).width()/2,
        'margin-top' : -$(this).height()/2
    });
}

或者你可能试试这个

 $('.vertmiddle').css({
        position:'absolute',
        left: ($(window).width() - $('.vertmiddle').outerWidth())/2,
        top: ($(window).height() - $('.vertmiddle').outerHeight())/2
    });

Answer 2

这是一个有效的解决方案，但您需要在HTML中添加id属性。我发现尝试调用jQuery方法来测量窗口对象使用类是非常错误的，其中在ids上使用的相同方法从来没有给我任何问题。无论如何，这是一种方法......

<section id="community" class="full">
  <div id="container" class="container">
    <div id="content" class="vertmiddle">
      content
    </div>
  </div>
</section>

function vertMiddle(){
  var element_height = $('#content').height();
  var element_offset = (window.innerHeight - element_height) / 2;
  $('#content').css('margin-top', element_offset +'px');
}

$(document).ready( function(){
    vertMiddle();
    $(window).on('resize', vertMiddle);
});

这是working JSFiddle example

使用jQuery垂直居中div

2 个答案: