如何將一個div集中在一起？ [垂直]

下面的代碼側重於中間div，但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>

固定。

來源

2016-03-07 bɪˈɡɪnə

[如何垂直居中的內容與一個div內可變高度？（HTTP的可能重複： //stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div） –

[如何將所有瀏覽器的div垂直居中？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） – Rob

-1

其實這是很簡單的可以將它幫助新手和我一樣。你可以在窗口上的任何地方滾動div，使用jQuery滾動，只需谷歌它和它在幾分鐘內容易理解。

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

來源

2016-03-08 03:05:44

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

來源

2016-03-07 14:31:59

如何將一個div集中在一起？ [垂直]

回答

相關問題