html - 以未知为中心

Question

我想将子 div 的尺寸居中并限制在其父 div 中。

<style type='text/css'>
  .parent {
    width: 100%;
    height: 100%;
  }
  .child {
    max-width: 100%;
    max-height: 100%;
  }
</style>

<div class="parent">
  <div class="child">
    <img src='dog.jpg' />
  </div>
</div>

约束条件如下:

• 父 div 设置为占据整个屏幕(大小未知)，因此 width:100% 和 height:100%。
• 子 div 的宽度和高度未知。在一个用例中，子 div 包含一个图像。在另一个中，它包含一个视频。
• 子 div 的宽度和高度必须限制为父 div 的大小，因此 max-width: 100% 和 max-height: 100%。
• 子 div 必须在父 div 内垂直和水平居中。
• 理想情况下，这应该可以在没有 javascript 的情况下工作。
• 可以不支持 IE :)

我已经尝试了这篇优秀文章 'Absolute Centering in CSS' 中列出的所有技术，而且没有一个成功。原因如下:

• 绝对居中:为了使此技术适用于大小未知的子项，您必须在子项上设置 display:table。然后，您可以限制子项内容的最大宽度，但不能限制最大高度，因为根据 CSS 2.1 规则，表格会呈现以适合其内容。
• 负边距:不允许可变高度。
• 转换:不可取，因为它会导致渲染模糊。
• Table-cell:失败的原因与绝对居中失败的原因相同，即表格渲染。
• Inline-block:在 child 宽度为 100% 的重要情况下不起作用。
• Flexbox:在窗口调整大小之前工作良好，此时您必须强制 Webkit 重绘以传播居中更改。这hack完成这项工作，但它仍然是一个黑客。我想相信有更优雅的解决方案。

Answer 1

这里最好的解决方案是使用:before 伪元素。查看这篇关于以未知为中心的文章，http://css-tricks.com/centering-in-the-unknown/

SEE THE DEMO HERE

body,html {
    width: 100%;
    height: 100%;
    margin: 0;
}
.container {
  text-align: center;
  background: #ccc;
  width: 100%;
  height: 100%;

}

.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
 }

.image {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
 }