垂直居中在 Firefox 中不起作用

Question

我有以下代码创建一个 'img-cell'div，它是空的，具有高度和背景图像。下面还有一个 'text-cell' div。（均为 100% 宽度）（php 代码已删除，不影响布局）

HTML

<article>
 <div class="img-cell">
 </div>

  <div class="text-cell">
   <div class="extra-css" >
      <h1>Title</h1>
      <h3>Category</h3>
   </div>
 </div>  
</article>

CSS

 article {
   position: relative;
   margin: 0; 
   padding: 0;
 }

.img-cell { 
  position: relative;
  height: 375px;
  width: auto;
  padding: 0;
  margin: 0;
  border-top: 1px solid #000;
  background-size: cover;
  background-repeat: no-repeat; 
}

 .text-cell {
   position: absolute;
   z-index: 10;
   padding: 15px 0;
   width: 100%;
   margin: auto;
   top: 0;
   bottom: 0;
   display:table;
 }

这使得 'text-cell' div 在 'image-cell' div 上垂直居中。它只适用于 Safari，但不适用于 Firefox 或其他浏览器。它与 display:table 有关。我不想使用表格，但我不知道如何垂直居中 'text-cell'

编辑 - 我在手机屏幕上有 'text-cell' position:relative，所以它低于 'img-cell' div

Answer 1

你可以试试这个：

将垂直居中.text-cell

要使 <H1> 和 <h3> 垂直居中，移除 padding

HTML

<article>
 <div class="img-cell">
  <div class="text-cell">
   <div class="extra-css" >
      <h1>Title</h1>
      <h3>Category</h3>
   </div>
 </div> 
</div>
</article>

CSS

 article {
   position: relative;
   margin: 0; 
   padding: 0;
 }

.img-cell { 
  position: relative;
  height: 375px;
  width: auto;
  padding: 0;
  margin: 0;
  border-top: 1px solid #000;
  background-size: cover;
  background-repeat: no-repeat; 
}

 .text-cell {
   position: absolute;
   z-index: 10;
   padding: 15px 0;
   width: 100%;
   margin: auto;
   top: 0;
   bottom: 0;
   display:table;
    top: 50%; //add this
    display: inline-block; //add this
    transform: translateY(-50%); //add this
    background: #f1f1f1;
    display: inline-block; //add this
    vertical-align: middle; //add this

 }

DEMO HERE

Answer 2

尝试解决您的问题的另一种方法，相同 HTML 但略有不同 CSS:

 article {
   position: relative;
 }

.img-cell {
  height: 375px; 
}

 .text-cell {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   left: 0;
   right: 0;
 }

Fiddle: http://jsbin.com/tumofitera/1/edit?html,css,output

垂直居中在 Firefox 中不起作用

vertically centring not working in firefox

html

javascript

css

jquery

absolute