Question

我看到这几次问过，但所有的答案都搞砸了我的身高。

    #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我想让它的高度和它里面的内容一样，所以如果我有一个特定的高度（就像我现在做的那样）它会限制但是我看到的所有答案都是水平和垂直居中甚至在页面大小调整上依赖于特定的高度

由于

Answer 1

您的一个选择是使用flexbox。下面有一个片段 - 您可以点击＆＃34;整页＆＃34;运行时：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

对于这个选项，你需要一个容器（它可以是任何高度，但是对于这个演示，我把它做成了全高）。然后，在容器上，您应用display: flex，然后使用align-items和justify-content水平和垂直地将内容与中心对齐。

请记住，flexbox中唯一的子项或项目是.transbox元素，因此它将相应地对齐。

Answer 2

您可以将DIV和内容水平和垂直对齐

onSignalStrengthsChanged()

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

即使在调整大小时，也可以水平和垂直居中div

2 个答案: