html - 我如何将这两个 div 在其父元素的中间垂直对齐？

Question

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

.grid-item-info {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    opacity: 0;
    color: #333333;
}
.grid-item:hover .grid-item-info {
    background: rgba(255,255,255,.6);
    opacity: 1;
    -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.grid-item .title,
.grid-item .category {
    width: 46%;
    float: left;
}
.grid-item .title {
    text-align: right;
    padding-right: 2%;
    border-right: 1px solid #333333;
    @include heading(16px,400);
}
.grid-item .category {
    text-align: left;
    margin-left: 2%;
    @include heading(16px,300);
}

    <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><!-- end. grid-item-info -->
    		<img src="img...">
    	</div><!-- end .col-md-4 -->
    </div><!-- end .grid-item -->

我想要做的是在 grid-item-info div 中垂直对齐标题和类别 div。我该如何着手完成这项工作？

Answer 1

这是我一直在使用的方法。

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

应用于.title 和.category