Html 我将如何垂直地将这两个div对齐在其父的中间？

我有以下代码，我想在中间对齐标题和类别div：

.grid项目信息{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：rgba（255255,0）；
不透明度：0；
颜色：#333333；
}
.grid项：悬停.grid项信息{
背景：rgba（255255,6）；
不透明度：1；
-webkit过渡：所有150ms的易入易出；
-moz转换：所有150ms的缓进缓出；
-o型过渡：所有150毫秒的缓进缓出；
-ms转换：所有150ms的输入输出；
过渡：所有150毫秒的缓进缓出；
}
.表格项目.标题，
.网格项.类别{
宽度：46%；
浮动：左；
}
.表格项目.标题{
文本对齐：右对齐；
右：2%；
右边框：1px实心#333333；
@包括标题（16px，400）；
}
.网格项.类别{
文本对齐：左对齐；
左缘：2%；
@包括标题（16px，300）；
}

标题
类别

您可以使用“显示：表格”实现垂直对齐

我已在此处编辑了您的代码>

您可以做的是，将父div显示为“table”，然后在显示的“table cell”中放置一个子div，并将对齐设置为middle

.styleTable {
    display: table; 
    height: 100%; 
    overflow: hidden;
}

.styleCell {
    display: table-cell; 
    vertical-align: middle;
}

<div class="grid-item">
    <div class="col-md-4">
        <div class="grid-item-info styleTable">
            <div class="styleCell">
                <div class="title">
                    Title
                </div><!-- end .title -->
                <div class="category">
                    Category
                </div><!-- end .category -->
            </div>
        </div><!-- end. grid-item-info -->
        <img src="img..." />
    </div><!-- end .col-md-4 -->
</div><!-- end .grid-item -->

.styleTable{
显示：表格；
身高：100%；
溢出：隐藏；
}
.styleCell{
显示：表格单元格；
垂直对齐：中间对齐；
}
标题
类别

在HTML中，垂直居中通常是一个挑战。我发现的最好的方法之一是使用CSS

verticalalign:center

如果您在
.grid item info
div中添加一个高度为100%的div，并删除
float
，我们可以像这样完成您所需要的：

<div class="grid-item">
  <div class="col-md-4">
    <div class="grid-item-info">
      <div class="title">
        Title
      </div><!-- end .title -->
      <div class="category">
        Category
      </div><!-- end .category -->
      <div class="vcenter"></div><!-- end .vcenter -->
    </div><!-- end. grid-item-info -->
    <img src="img...">
  </div><!-- end .col-md-4 -->
</div><!-- end .grid-item -->

.grid-item .title,
  .grid-item .category {
  width: 46%;
  display:inline-block;
  vertical-align:center;
}
.grid-item .vcenter {
  vertical-align:middle;
  display:inline-block;
  height:100%;
}


标题
类别
.表格项目.标题，
.网格项.类别{
宽度：46%；
显示：内联块；
垂直对齐：居中；
}
.grid项.vcenter{
垂直对齐：中间对齐；
显示：内联块；
身高：100%；
}

这里有一把小提琴来演示：
这是我一直在使用的方法

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
position: relative;

应用于.title和.category
如果您只支持IE9+是的，您是对的。我通常不支持IE8及以下版本。谢谢-这对我很有用，但为什么必须有vcenter，为什么那些CSS属性不能在网格项目信息中？当你使用
display:inline block；垂直对齐：居中，它将所有
内联
项垂直对齐。由于
网格项目信息
不是其内部的项目之一，因此应用于它的CSS不会更改其内部项目的对齐方式。但是，正如我所做的，您可以添加一个div，它将填充整个高度，垂直对齐，所有项目现在将彼此垂直对齐。如果这对你有意义，请告诉我。这是有意义的。非常感谢你的回答和解释。