329
2018-11-17 01:06:52
下面是我可以构建的最佳全能解决方案，以将固定宽度，高度灵活的内容框垂直和水平居中。它已经过测试，可用于Firefox，Opera，Chrome和Safari的最新版本。
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>我构建了一些动态内容来测试灵活性，并且很想知道是否有人看到它的任何问题。它也应适用于居中的叠加层-灯箱，弹出式窗口等。
热门帖子
热门github
1
2
4
The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems.
(翻译：用于生成式 AI 的 Python 风险识别工具 (PyRIT) 是一个开放式访问自动化框架，使安全专业人员和机器学习工程师能够主动发现其生成式 AI 系统中的风险。)
5
7
8
9
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.
(翻译：Mamba 是一种新的状态空间模型架构，在信息密集型数据（例如语言建模）上显示出良好的性能，而之前的二次模型在 Transformers 方面存在不足。它基于结构化状态空间模型的进展，并本着FlashAttention的精神进行高效的硬件感知设计和实现。)
10
11
13
如果没有“绝对”外部DIV，则页面上的任何内容将向下推整个块。这使其更独立于其他页面内容。
.outer {position:absolute;width:100%;height:100%}没有必要，它们只是在这里进行演示。我们需要的是display:table，如果有人像我一样感到困惑。我注意到，这需要99％的比例来避免滚动条。更重要的是，该工程仅在第一个两个div，说保持
.outer和middle明白地忽略.inner和它的风格。我不知道的要点是什么margin-left，margin-right将其设置为auto，因为它不会使元素水平居中？删除
width: 100%;和添加margin: 0 auto也.outer允许可变宽度。现在是2020年，我们不再需要像这样的技巧来进行垂直居中。只需在父元素上使用flexbox。它甚至可以在IE11中使用！
.outer { display: flex; justify-content: center; align-items: center; height: 400px}（请注意，垂直居中始终要求父元素的高度是有限的）