javascript - 如何将焦点集中的div居中？ [垂直]

Question

下面的代码将焦点放在中间的 div 上，但该 div 出现在窗口的底部。如何使该 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> 

已修复。

Answer 1

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

.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;    }

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>