2014-12-05 43 views
0

我看到這問了幾次,但所有的答案搞砸了我的身高。即使在調整大小的情況下居中對齊水平和垂直

#transbox { 

      position: fixed; 
      top: 150px; 
      right: 320px; 
      width: 600px; 
      height: 210px; 
      background-color: #fff; 
      border: 1px solid #000; 
      opacity: 0.7; 
      filter: alpha(opacity=60); 
      } 

<div id="transbox"> 

<div id="title">navigation</div> 


    <div id="navigation"> 
     <table style="width:100%"> 
      <tr> 
       <td><a href="/">link</a></td> 
       <td><a href="/">link</a></td> 
       <td><a href="/">link</a></td> 
      </tr> 

      <tr> 
       <td><a href="/">link</a></td> 
       <td><a href="/">link</a></td> 
       <td><a href="/">link</a></td> 
      </tr> 

      <tr> 
       <td><a href="/">link</a></td> 
       <td><a href="/">link</a></td> 
       <td><a href="/">link</a></td> 
      </tr> 
     </table> 
    </div> 

</div>  

這是一個div,它的CSS,我想讓這個高度是一樣的裏面,所以如果我有一個特定的高度(像我目前做的),它會限制內容它,但我已經看到了在頁面大小調整水平和垂直居中,甚至所有的答案依賴於特定的高度

感謝

你的選擇
+0

那麼,垂直居中是不是水平居中更具挑戰性。大多數解決方案需要特定的高度很多人使用Javascript來查找內容的高度,將div從頂部放置50%,然後margin-top將是div的計算高度的一半。 – philtune 2014-12-05 21:44:39

+0

可能重複[如何垂直居中所有瀏覽器的div?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – philtune 2014-12-05 21:45:54

+0

嗯好吧@philtune,我確實在我的舊文件中有,但我愚蠢地沒有做出備份,它已經丟失了 – P3iahsd8 2014-12-05 21:46:10

回答

0

一種是使用Flexbox的。有下面的一個片段 - 你可以看到通過點擊「整版」它的工作原理在運行它時:

html, body { height: 100%; margin: 0; } 
 
#container { 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#transbox { 
 
    position: relative; 
 
    width: 600px; 
 
    background-color: #fff; 
 
    border: 1px solid #000; 
 
}
<div id="container"> 
 
    <div id="transbox"> 
 
    <div id="title">navigation</div> 
 
    <div id="navigation"> 
 
     <table style="width:100%"> 
 
     <tr> 
 
      <td><a href="/">link</a></td> 
 
      <td><a href="/">link</a></td> 
 
      <td><a href="/">link</a></td> 
 
     </tr> 
 
     <tr> 
 
      <td><a href="/">link</a></td> 
 
      <td><a href="/">link</a></td> 
 
      <td><a href="/">link</a></td> 
 
     </tr> 
 
     <tr> 
 
      <td><a href="/">link</a></td> 
 
      <td><a href="/">link</a></td> 
 
      <td><a href="/">link</a></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

對於這個選項,你需要有一個容器(它可以是任何高度,但對於這個演示,我做了它的全高)。然後,在容器上應用display: flex,然後使用align-itemsjustify-content將內容水平和垂直對齊中心。

請注意,Flexbox中的唯一孩子或項目是.transbox元素,因此它將相應地對齊。

+0

這很完美!非常感謝你 :) – P3iahsd8 2014-12-05 22:16:22

0

可以水平對齊中心DIV和內容,並垂直

.content{margin: auto; 
display: flex; 
justify-content: center; 
align-items: center; 
resize: both; 
padding-top: 0px !important;} 

演示:https://jsfiddle.net/nivinnv/wxmst7fr/