即使在调整大小的情况下居中对齐水平和垂直

我看到这问了几次，但所有的答案搞砸了我的身高。即使在调整大小的情况下居中对齐水平和垂直

#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

即使在调整大小的情况下居中对齐水平和垂直

回答

相关问题