在未知中心 [英] Centering in the unknown

问题描述

我想集中并锁定父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的宽度和高度必须限制为父级的大小，因此 max-width：100％ max-height：100％。






• 理想情况下，这应该在没有javascript的情况下工作。


• IE可以不被支持：）

我已经尝试过这篇优秀文章中列出的所有技术，''CSS中的绝对居中'，而且没有一个平移。这是为什么：

• 绝对中心：为了使此技术与未知大小的孩子一起工作，必须对子级设置 display：table 。


• 负边距
/ strong>：不允许变量高度。

• 转换：不可取，因为它可能导致模糊渲染。


• 表格单元格：由于绝对中心失败的相同原因（即表格呈现）而失败。




• Flexbox ：工作得很好，直到发生窗口大小调整，此时你必须强制Webkit重绘以传播中心变化。此黑客会工作，但它仍然是一个黑客。

最好的解决方案是：使用：before 伪元素。请查看有关未知的中心位置的文章， http://css-tricks.com/centering -in-the-unknown /

查看此处的演示

  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; / *调整间距* / 
} 
 
 .image {
 display：inline-block; 
 max-width：100％; 
 max-height：100％; 
 vertical-align：middle; 
 padding：10px 15px; 
 border：＃a0a0a0 solid 1px; 
 background：＃f5f5f5; 
} 
  

I would like to center and clamp the dimensions of a child div inside its parent.

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

Here are the constraints:

• The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100%.
• The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video.
• The width and height of the child div must be constrained to the size of the parent, so max-width: 100% and max-height: 100%.
• The child div must be vertically and horizontally centered inside the parent.
• Ideally, this should work without javascript.
• IE can be left unsupported :)

I've tried all the techniques listed in this excellent article, 'Absolute Centering in CSS' , and none of them pan out. Here's why:

• Absolute centering: In order for this technique to work with a child of unknown size, you must set display:table on the child. You can then constrain the max-width of the child's contents, but not the max-height, because by CSS 2.1 rules, tables render to fit their contents.
• Negative margins: Doesn't allow for variable height.
• Transforms: Undesirable because it can result in blurry rendering.
• Table-cell: Fails for the same reason that absolute centering fails, i.e. table rendering.
• Inline-block: Doesn't work in the important case where the child is 100% width.
• Flexbox: Works well until a window resize occurs, at which point you have to force a Webkit redraw to propagate the centering changes. This hack does the job, but it's still a hack. I want to believe there's a more elegant solution to this.

解决方案

Best solution here is to use :before pseudo element. Check out this article on centering the unknown, 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;
 }

这篇关于在未知中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！