Question

我正试图保留这个盒子＆＃39; c＆＃39;在＆＃39; a＆＃39;中间并且填充30px 10px 10px 10px，这样它在顶部有更多的空间，从另一侧有相同的空间。但我想要盒子＆＃39; c＆＃39;不仅要在这些界限之间，而且要在纵向和横向中心位于这些范围之内。当你制作盒子时，＆＃39; b＆＃39;宽度大于缩小的范围＆＃39; a＆＃39;和＆＃39; c＆＃39;保持c的长宽比，制作＆＃39;＆＃39;宽度更小，停止＆＃39; c＆＃39;从超出其极限的增长，并防止它溢出。还＆＃39; b＆＃39;宽度/高度只会增长到200px。

这是模板和我在css中的尝试：

<div class='z'>
<div class='a'>
    <div class='c'></div>
</div>
<div class='b'>
</div>

.z {
    display: flex;
    width: 300px;
    height: 200px;
}

.a {
    background-color: blue;
    padding: 30px 10px 10px 10px;
    flex: 1;
}

.b {
    background-color: yellow;
    width: 50%;
    max-width: 200px;
    transition: all 1s;
}

.c {
    background-color: red;
    margin: auto;
    width: 100%;
    padding-bottom: 100%;
}

这是我在jsfiddle的尝试：http://jsfiddle.net/c8w79mLx/

Answer 1

你想要的是什么？ FIDDLE

我没有使用填充到“a”框，而是使用绝对定位到c框：

.c {
    background-color: red;
    margin: auto;
    padding-bottom: 100%;
    position:absolute;
    bottom:10px;top:30px;right:10px;left:10px;
}

Answer 2

将类的css更改为：

.a {
background-color: blue;
flex: 1;
padding: 50px 10px;
align-items: center;

}

并且c类要：

.c {
background-color: red;
width: 100%;
height: 100%;

}

这里的小提琴更新 - ＆gt; http://jsfiddle.net/c8w79mLx/6/

flex div中的中心div，同时保持纵横比

2 个答案: