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.

Possible duplicate of [How to vertically center content with variable height within a div?](http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div) — Mehdi, Mar 07 '16 at 13:01
Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Rob, Mar 07 '16 at 13:33

score 0 · Answer 1 · answered Mar 07 '16 at 14:31

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

score 0 · Accepted Answer · answered Mar 08 '16 at 03:05

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>

How to center a div being focused? [vertically]

2 Answers2