How to center a div being focused? [vertically]

Question

The code below lays focus on middle div but that div appears at the bottom of the window. How can I center that div so it appears in the center of window [vertically] without setting position fixed.

 $(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> 

fixed.

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> 

Answer 2

Actually this was pretty simple may it help newbies like me. You could scroll the div anywhere on the window using jQuery scroll just google it and its easy to understand in few mins.

 $(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> 

Actually it was pretty simple

 $(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>