Question

我写这样的HTML

<div class="outside-div">
<div class="inside-div1">
<div class="inside-div2">
</div>

css like this:
.outside-div{
width: 500px;
height: 500px;
position: relative;
font-size: 0px;
}

.inside-div1{
width:100px;
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
display: inline-block;
}

.inside-div2{
width:100px;
height: 300px;
position: relative;
top:50%;
transform: translateY(-50%);
display: inline-block;
}

正如我们所知，我们可以通过变换方式将inside-div（display：inline-block）垂直居中于outside-div中，但是如果我添加一个新的inside-div，我会发现第一个inside-div位置变化，它看起来像是第二个内部div。

Answer 1

你的2个内部div正在超越对方..你的内部div2超越了内部div1，因此你无法看到内部div1。如果你删除其中一个，你会看到你的另一个div仍然在它后面。在这里，我做了一些修改，将div分开。

此外，尝试一次删除一个div ..你将会知道div正好在彼此之后。

＆＃13;

.outside-div{
width: 500px;
height: 500px;
position: relative;
font-size: 0px;
background:black;
}

.inside-div1{
width:100px;
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
display: inline-block;
background:red;
}

.inside-div2{
width:100px;
height: 300px;
position: relative;
top:50%;
transform: translateY(-50%);
display: inline-block;
background:yellow;
margin-left:200px;
}

＆＃13;

我希望通过变换方式

1 个答案: