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

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

可以使用'display: table'实现垂直对齐。

我在这里编辑了你的代码 > https://jsfiddle.net/q5o9ubxn/

您可以做的是将父项 div 显示为 'table'，然后在显示的 'table-cell' 中放置一个子项 div 并将对齐方式设置为中间.

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

Answer 2

在 HTML 中，垂直居中通常是一个挑战。我发现的最好的方法之一是利用 CSS vertical-align: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%;
}

这里有一个fiddle来演示：https://jsfiddle.net/n2y8wpwt/

Answer 3

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

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

应用于.title 和.category

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

How would I vertically align these two divs in the middle of its parent?

html

css

alignment

vertical-alignment