以有效的方式使两个内盒垂直对齐中心？

Question

.dd{
  height:100px;
  width:100%;
  border:1px soild red;
  background:#000;
}
.dd .d1{
   height:20px;
   width:20px;
   border:1px solid green;
  display:inline-block;
  
}
.dd .d2{
   height:20px;
   width:20px;
   border:1px solid green;
  display:inline-block;
  
}
.dd .d3{
   height:40px;
   width:30px;
   border:1px solid yellow;
  display:inline-block;
}

<div class="dd">
   <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
</div>

在我的项目中，我总是找不到垂直元素的好方法。任何人都有使元素（任何情况）垂直对齐的优点吗？

我自己的愚蠢方式：

当out div没有高度时，对我来说更容易，我经常让margin-top等于margin-bottom，并且垂直对齐如下：

.dd{
   height:auto;
   width:100%;
   background:#000;
}

.dd>div:first-child{
  display:inline-block;
   margin-top:1em;
   margin-bottom:1em;
    height:80px;
  width:50px;
   border:1px solid red;
  margin-left:1em;
}
.dd>div:last-child{
  display:inline-block;
   margin-top:1em;
   margin-bottom:1em;
   
  height:50px;
  width:50px;
   
  border:1px solid green;
}

<div class="dd">
  <div></div>
  <div></div>
</div>

但在这种情况下，我现在找不到一个好的做法，有人有想法吗？

第二次添加

我改变了我的愚蠢方式：

.dd>div:first-child{height:50px }

到

.dd>div:first-child{height:80px }

除非您将 height:80px 改回 height:50px，否则我的愚蠢方法似乎确实有效

关于我要实现的是，我希望 innerDivs(inline-block) 放置在固定高度外部 div 的中心（垂直）（也就是说，我想让内部 div 的边距顶部和margin-bottom 相等）

请在这里做更多的解释，以便我们了解它为什么可以工作，谢谢

Answer 1

垂直对齐文本或块是非常古老且已知的 html/css 问题。多年来提出了许多解决方案，这些解决方案取决于浏览器的功能和初始条件（文本或块，已知或不知道元素的高度等）。

Chris Coyier 试图在自己的网站上将所有技术收集在一个完整的指南中，并按最常用的用例对它们进行分类。

Centering in CSS: A Complete Guide

目前我最喜欢的是最现代的方法：flexbox 并通过transform: translateY(-50%) 规则对齐。它们是最简洁明亮的。

Answer 2

• 我使用了父级的:pseudo 元素:before 即dd 来垂直对齐内部元素

• 每个内联元素都可以使用vertical-align:middle垂直居中

我使用了伪元素，以便它可以用作inline-block 元素与父级的100% height

.dd {
  height: 100px;
  width: 100%;
  border: 1px soild red;
  background: #000;
}
/* added to vertiaclly align the elements inside */
.dd:before {
  content: '';
  height: 100%; /* set the height of the element to 100% so that the inner elements can align to its full height */
  display: inline-block; /* this is the property which is need to vertically center */
  width: 1px; /* set the width to 1px */
  margin-left: -1px; /* so that the width doesnt effect the children */
  vertical-align: middle; /* is added to vertically align the elements */
}
.dd div {
  vertical-align: middle; /* is added to vertically align the elements */
}
/* end */
.dd .d1 {
  height: 20px;
  width: 20px;
  border: 1px solid green;
  display: inline-block;
}
.dd .d2 {
  height: 20px;
  width: 20px;
  border: 1px solid green;
  display: inline-block;
}
.dd .d3 {
  height: 40px;
  width: 30px;
  border: 1px solid yellow;
  display: inline-block;
}

<div class="dd">
  <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
</div>

Answer 3

根据这个document，在CSS2中你可以使用table-cell显示和vertical-align属性，但我不是这种代码的忠实粉丝。

这是使用它的代码的小提琴： https://jsfiddle.net/Laf2wv4n/1/

Answer 4

试试这个：

.dd {
    display: flex;
    align-items: center;
}

这样 .dd 容器中的任何项目都将垂直居中。如果您希望所有内容也水平居中，请编写：

justify-content: center;

编辑 注意：这仍然适用于 flex 容器中元素的高度。