Question

下面的代码将焦点放在中间div上，但div出现在窗口的底部。如何将该div居中，使其显示在窗口中心[垂直]，而不设置固定位置。

＆＃13;

$(function(){
    $("#focus").focus().addClass('getCentered');;
     setTimeout(function() {
        $('#focus').css("background-color", "white");
    }, 1000);
});

＆＃13;

.top{background:red;height:400px;width:2oopx}
#focus{background:#ededed;height:40px;width:2oopx}
.bottom{background:green;height:300px;width:2oopx}

＆＃13;

The code below focuses on the middle `div` but the div focused is shown at the bottom of the page. How can I center that div so that it is shown at center of page[vertically] without setting position fixed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">hello</div>   
<div id="focus" tabindex="1">Hello world</div>
<div class="bottom">world</div>

＆＃13;

固定。

Answer 1

＆＃13;

$(function(){
    $("#focus").focus().addClass('getCentered');;
     setTimeout(function() {
        $('#focus').css("background-color", "white");
    }, 1000);
});

＆＃13;

.top{background:red;height:400px;width:2oopx}
#focus{    display: table;  background:#ededed;  height:40px;  width:200px }
.bottom{background:green;height:300px;width:2oopx}
h4 {    display: table-cell;    vertical-align: middle;    }

＆＃13;

The code below focuses on the middle `div` but the div focused is shown at the bottom of the page. How can I center that div so that it is shown at center of page[vertically] without setting position fixed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">hello</div>   
<div id="focus" tabindex="1"><h4>Hello Text</h4></div>
<div class="bottom">world</div>

＆＃13;

Answer 2

实际上这很简单，可能会帮助像我这样的新手。您可以使用jQuery滚动在窗口的任何位置滚动div只需谷歌它，并在几分钟内易于理解。

$(document).ready(function () {
    $('html, body').animate({
         scrollTop: $('#focus').offset().top - ($(window).height() - $('#focus').outerHeight(true)) / 2
    }, 'fast');
});

$(function(){
    $("#focus").focus().addClass('getCentered');;
     setTimeout(function() {
        $('#focus').css("background-color", "white");
    }, 1000);
});

.top{background:red;height:400px;width:2oopx}
#focus{background:#ededed;height:40px;width:2oopx}
.bottom{background:green;height:300px;width:2oopx}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">hello</div>   
<div id="focus" tabindex="1">Hello world</div>
<div class="bottom">world</div>

实际上很简单

$(function(){
    $("#focus").focus().addClass('getCentered');;
     setTimeout(function() {
        $('#focus').css("background-color", "white");
    }, 1000);
});

.top{background:red;height:400px;width:2oopx}
#focus{background:#ededed;height:40px;width:2oopx}
.bottom{background:green;height:300px;width:2oopx}

The code below focuses on the middle `div` but the div focused is shown at the bottom of the page. How can I center that div so that it is shown at center of page[vertically] without setting position fixed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">hello</div>   
<div id="focus" tabindex="1">Hello world</div>
<div class="bottom">world</div>

如何集中一个被聚焦的div？ [垂直]

2 个答案: