Html 无法在父级中垂直对齐并排的子div

我有三个孩子并排坐在父母的房间里。左侧和右侧为固定宽度，而中间为可变宽度，需要随浏览器调整大小。由于它们的高度不同，我需要在父对象内部垂直对齐它们，但我无法使它们对齐，它们会粘在顶部。我有什么办法可以做到这一点吗？子div的高度是固定的，但父div的高度应该是可变的

CSS:

HTML

---

div的高度是否固定？从您的代码中可以看出，高度固定为400px。如果这是真的，那么解决方案非常简单-只需为

div1

和

div3

提供

margintop

我已经为此创建了提琴，并删除了一些无用的CSS片段（它们没有任何区别）。看一看

---

潜水舱的高度是固定的吗？从您的代码中可以看出，高度固定为400px。如果这是真的，那么解决方案非常简单-只需为

div1

和

div3

提供

margintop

我已经为此创建了提琴，并删除了一些无用的CSS片段（它们没有任何区别）。看一看

---

这里有一个无JS的方法来实现这一点，使用侧divs上的

position:absolute

：

小提琴：

CSS

---

HTML可以保持不变，但现在也可以交换

#div2

和

#div3

的位置，因为没有需要特定顺序的浮动元素。

这里有一个无JS的方法来实现这一点，使用侧divs上的

位置：absolute

：

小提琴：

CSS

---

HTML可以保持不变，但现在也可以交换

#div2

和

#div3

的位置，因为没有需要特定顺序的浮动元素。

而不是垂直对齐：中间使用行高属性I假设您需要无Javascript的解决方案？不一定，但是如果有一个CSS唯一的解决方案会更好，可能吗？是的，使用

position:absolute；最高：50%，然后应用元素高度一半的负
边距顶部。这是一种非常常见的垂直居中方式。请看我的答案，看一个活生生的例子。@natlines:我看到你没有把我的答案标记为已接受。我的代码有问题吗？不是垂直对齐：中间使用行高属性我想你需要一个无Javascript的解决方案？不一定，但如果有一个只有CSS的解决方案会更好，可能吗？是的，使用
position:absolute；最高：50%，然后应用元素高度一半的负
边距顶部。这是一种非常常见的垂直居中方式。请看我的答案，看一个活生生的例子。@natlines:我看到你没有把我的答案标记为已接受。我的代码有问题吗？对不起，我应该提到，子div的高度是固定的，但是父div的高度应该是可变的。对不起，我应该提到，子div的高度是固定的，但是父div的高度应该是可变的。line height：很好的解决方案。如果用户想在divs中添加一些文本，该怎么办？这是我早期版本的一个遗留问题<代码>线条高度
在此解决方案中不是必需的，因此已被删除。线条高度：良好的解决方案。如果用户想在divs中添加一些文本，该怎么办？这是我早期版本的一个遗留问题<代码>行高
在此解决方案中不是必需的，因此已被删除。
#divMain { width: 100%; min-width:320px; height:400px}
#div1 { width: 100px; height: 200px; float: left; red;vertical-align:middle;display:inline-block; }
#div2 { margin-left: 110px; height: 400px; margin-right: 110px; vertical-align:middle;}
#div3 { width: 100px; height:300px; float: right; vertical-align:middle;display:inline-block;}

<div id="divMain">
    <div id="div1"></div>
    <div id="div3"></div>
    <div id="div2"></div>
</div>

#divMain {
    width: 100%;
    min-width:320px;
    position: relative;
}
#div1 {
    width: 100px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}
#div2 {
    height: 600px;
    margin: 0 110px;
    background-color: green;
}
#div3 {
    width: 100px;
    height:300px;
    background-color: blue;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -150px;
}