即使在調整大小的情況下居中對齊水平和垂直

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

#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，我想讓這個高度是一樣的裏面，所以如果我有一個特定的高度（像我目前做的），它會限制內容它，但我已經看到了在頁面大小調整水平和垂直居中，甚至所有的答案依賴於特定的高度

感謝

你的選擇

來源

2014-12-05 P3iahsd8

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

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

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

一種是使用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-items和justify-content將內容水平和垂直對齊中心。

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

來源

2014-12-05 21:59:44 Purag

這很完美！非常感謝你：） – P3iahsd8 2014-12-05 22:16:22

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

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

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

來源

2016-12-29 08:35:33

即使在調整大小的情況下居中對齊水平和垂直

回答

相關問題