保持长宽比和相对于父级的位置

Question

我正在尝试将尺寸可变的父元素内的元素都设为正方形，并放置在左侧并垂直居中。 我宁愿只在CSS中这样做，而避免使用javascript。

这将产生一个具有正确宽度和水平位置（从左侧起10％）的框，但它会填充其父级的高度。 http://jsfiddle.net/6tvsmLnp/

<div id="d1">
  <div id="d2"></div>
</div>
<style type="text/css">
*
{
    margin:0;padding:0;
}

div#d1
{
    width: 90vw; 
    height: 50.625vw;
    background: pink;
    max-height: 90vh;
    max-width: 177.78vh;
    margin: auto;
    position: absolute;
    top:0;bottom:0;
    left:0;right:0;
}
div#d2
{
    background: blue;
    width:10%;
    top: 0;
    bottom: 0;
    left: 10%;
    position:absolute;
    margin:auto;
}
#d2:before{
    content: "";
    display: inline-block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}
</style>

将#d2的position更改为相对position可以使其具有所需的大小和宽高比，但是位于其父级中心的顶部和右侧。 http://jsfiddle.net/ozu6c4eo/1/

<div id="d1">
  <div id="d2"></div>
</div>
<style type="text/css">
*
{
    margin:0;padding:0;
}

div#d1
{
    width: 90vw; 
    height: 50.625vw;
    background: pink;
    max-height: 90vh;
    max-width: 177.78vh;
    margin: auto;
    position: absolute;
    top:0;bottom:0;
    left:0;right:0;
}
div#d2
{
    background: blue;
    width:10%;
    top: 0;
    bottom: 0;
    left: 10%;
    position:relative;
    margin:auto;
}
#d2:before{
    content: "";
    display: inline-block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}
</style>

Answer 1

演示-http: //jsfiddle.net/victor_007/6tvsmLnp/1/

div#d2 {
    background: blue;
    width: 10%;
    top: 50%; /** changed to center vertically **/
    bottom: 0;
    left: 10%;
    position: relative;
    transform: translateY(-50%); /** added to center vertically **/
}