垂直居中anothe專區內對齊一個div

說我有垂直居中anothe專區內對齊一個div

<div id ="outer" class="outer"> 
    <div id= "inner" class="inner"> 
     //some stuff 
    </div> 
</div>

內div有一個動態的高度，它的變化取決於什麼是div內。外部div只是一個容器，它被設置爲具有窗口的高度。

我想要設置它，以便內部div在外部div內垂直居中。有沒有一種方法可以在CSS中輕鬆完成此操作，還是JavaScript是必需的？

的解決方案，我發現：

var container= document.getElementById("outer"); 
var inner= document.getElementById("inner"); 
var inHeight=inner.offsetHeight; 

container.style.height=(window.innerHeight-10); 
container.style.width=window.innerWidth; 

var conHeight=container.offsetHeight; 

inner.style.marginTop=((conHeight-inHeight)/2);

萬一別人尋找解決同樣的問題，這爲我工作。

強調文本

來源

2012-02-16 moesef

與一些有用的建議相關的問題：http://stackoverflow.com/questions/7206640/css-vertically-align-div-when-no-fixed-size-of-the-div-is-known – Artyom 2012-02-16 08:26:05

嘗試了這一點http://jsfiddle.net/gLChk/12/

，但它不會在IE 8個<瀏覽器都支持。爲了讓所有的瀏覽器，你必須寫一個js將找到.inner的高度和應用這些CSS屬性

$(document).ready(function(){ 
var inner = $('.inner'), 
    ht = inner.height(); 

inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'}); 
});

希望這有助於。 :)

來源

2012-02-16 09:05:39 Abhidev

工作我認爲我做了幾乎相同的事情只使用JS而不是JQuery。看到我的問題。我添加了我提出的解決方案。 – moesef 2012-02-16 09:19:59

哦...好吧，我沒有看到你的更新答案...以及這也會工作。 :) – Abhidev 2012-02-16 09:43:56

字面上做同樣的事情，但只是以不同的方式。 – moesef 2012-02-16 18:18:06

-3

使用：

.inner 
{ 
    margin-top:auto; 
    margin-bottom:auto; 
}

來源

2012-02-16 08:06:38 Hadas

我實際上試過這個，它不會工作[jsFiddle]（http://jsfiddle.net/UrFJH/） – CyrillC 2012-02-16 08:10:48

我其實認爲這將工作......但事實證明，我的外部div沒有設置爲高度和窗口的寬度.... – moesef 2012-02-16 08:13:26

這[不工作]（http://jsfiddle.net/8sdEn/）垂直只有水平 – PeeHaa 2012-02-16 08:29:33

-1

與

.inner { 
top: 50%; 
bottom: 50%;  
}

jsfiddle

試試看迎接

來源

2012-02-16 08:12:20 CyrillC

用這種方法不需要減去內部div/2的高度從50％得到'確切'的光學中心？ – dougajmcdonald 2012-02-16 08:16:20

@dougajmcdonald你說得對... – CyrillC 2012-02-16 08:18:31

如果你正確地檢查它，它不完全垂直在中間。 – Abhidev 2012-02-16 08:57:11

.outer { 
    display: table; 
    position: relative; 
    width:100%; 
    height:200px; 
    border:1px red solid; 
} 
.inner { 
    display: table-cell; 
    position: relative; 
    vertical-align: middle; 
}

來源

2012-02-16 08:16:14 Desigens

請注意，它不會在IE7 – mkk 2012-02-16 08:28:14

垂直居中anothe專區內對齊一個div

回答

相關問題