html - 我想通过变换方式在外部 div 中放置两个内联 block 垂直中心

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

我们知道，我们可以通过变换的方式在outside-div中垂直居中一个inside-div(display: inline-block)，但是如果我添加一个新的inside-div，我发现第一个inside-div的位置会是变化，它看起来像相对的第二个内部 div。

Answer 1

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

此外，尝试一次删除一个 div.. 你会发现 div 紧挨着彼此。

.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;
}