Html 将div水平和垂直居中（即使在调整大小时）

我看到这个问题问了好几次，但所有的答案都把我的身高搞砸了

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

#transbox{
位置：固定；
顶部：150px；
右：320px；
宽度：600px；
高度：210px；
背景色：#fff；
边框：1px实心#000；
不透明度：0.7；
过滤器：α（不透明度=60）；
}
航行

这是一个div，它是CSS，我想让它的高度与里面的内容相同，所以如果我有一个特定的高度（就像我现在做的），它会限制它，但是我看到的所有关于水平居中和垂直居中的答案，甚至页面大小调整都依赖于一个特定的高度

---

谢谢

您的选择之一是使用flexbox。下面有一个片段--您可以看到，在运行它时，单击“完整页面”可以工作：

html，正文{高度：100%；边距：0；}
#容器{
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#变速箱{
位置：相对位置；
宽度：600px；
背景色：#fff；
边框：1px实心#000；
}

航行

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

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

---

演示：

嗯，垂直居中比水平居中更具挑战性。大多数解决方案需要特定的高度。很多人使用Javascript来查找内容的高度，将div定位在距离顶部50%的位置，然后边距顶部将是div计算高度的负一半。可能是Hmm的重复ok@philtune，我的旧文件中有它，但我愚蠢地没有备份，它丢失了