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>

将position更改为#d2使其达到所需的大小和宽高比，但会在其父级的中心顶部和右侧进行设置。 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 **/
}

保持纵横比和相对于父母的位置

1 个答案: