How to resolve vertical centralization bug in Firefox?

Question

The code below works perfectly in Chrome 46, Opera 32, Safari 9, but in Firefox 41 does not work, the element gets stuck at the top instead of being centralized.

Run the code below:

.o-hero {
    background-color: #25385f;
    color: #fff;
    height: 30rem;
    position: relative;
    text-align: center;
}

.o-hero__dialog {
    bottom: 0;
    display: table;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<section class="o-hero">
  <div class="o-hero__dialog">
    <h1 class="o-hero__title">Socialite is a awesome theme</h1>
    <p class="o-hero__desc">Perfect web architecture for high-end applications.</p>
    <a href="#">Buy this theme</a>
  </div>
</section>

Any idea how to fix this?

Answer 1

Here is a suggestion to solve your problem:

.o-hero {
  background-color: #25385f;
  color: #fff;
  height: 30rem;
  position: relative;
  text-align: center;
}
.o-hero-wrapper {
  display: table;
  width: 100%;
  height: 100%;
}
.o-hero__dialog {
  display: table-cell;
  width: 30rem;
  text-align: center;
  vertical-align: middle;
}

<section class="o-hero">

  <div class="o-hero-wrapper">
    <div class="o-hero__dialog">
      <h1 class="o-hero__title">Socialite is a awesome theme</h1>

      <p class="o-hero__desc">Perfect web architecture for high-end applications.</p>
      <a href="#">Buy this theme</a>
    </div>
  </div>

</section>

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet" />

Answer 2

You should not use the display: table for the following reasons:

"The display: table statement causes the HTML element to be rendered as a table." [Source: Majour].

"If it looks,Works and Sounds like a table, it must be a table? Wrong!"

Translation: "If this looks, works and sounds like a table, should that be a table? Wrong!" [Source: Colintoh].

"There are two Essential Arguments for not using Tables: Semantic Markup and avoiding tag Soup. (Too Many tags)"

Translation: "There are two essential arguments for not using tables: Semantics and avoid many tags."

[Source: Stack Overflow]

---

These are statements that include both the CSS table attributes and the tag <table> in itself. In case the idea has not been made clear, I suggest you read the texts.

But anyway, what I really mean by all this is that there are better ways to do this, like for example:

Flex-box (Flexible Box Model):

.o-hero {
  align-items: center;
  background-color: #25385f;
  display: flex;
  height: 30rem;
  justify-content: center;
}
.o-hero__dialog {
  color: #fff;
  display: block;
  margin: auto;
  text-align: center;
  width: 30rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet" />
<section class="o-hero">
  <div class="o-hero__dialog">
    <h1 class="o-hero__title">Socialite is a awesome theme</h1>
    <p class="o-hero__desc">Perfect web architecture for high-end applications.</p>
    <a href="#">Buy this theme</a>
  </div>
</section>

Explanation: What I did here was just remove the unnecessary attributes like position: relative and Absolute and its like; display table was replaced by display block in the child and added element display flex for the parent element. It also redistributes the properties of color and text-align for the child, since it is he who owns the texts. You may notice that the code becomes much cleaner.

If you choose to use this solution recommend the use of vendor-prefixes (-Webkit, -ms...). Compatibility of the properties of Flex-box according to the Can i use.


Or you can just use,

Horizontal Alignment with translateY:

.o-hero {
  background-color: #25385f;
  height: 30rem;
  overflow: hidden;
}
.o-hero__dialog {
  color: #fff;
  display: block;
  margin: 0 auto;
  position: relative;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 30rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet" />
<section class="o-hero">
  <div class="o-hero__dialog">
    <h1 class="o-hero__title">Socialite is a awesome theme</h1>
    <p class="o-hero__desc">Perfect web architecture for high-end applications.</p>
    <a href="#">Buy this theme</a>
  </div>
</section>

Explanation: I made basically the same changes as the above example, just this time the position Absolute the child element was replaced by relative, adding to it also the properties top and translateY that are responsible for vertical centralization. To finalize a overflow Hidden in the parent element to hide leftovers.

---

Understand, I’m not saying that these are the right ways and even that using table is wrong, I’m just presenting you with solutions a little more sensible.

NOTE: in the child element I recommend you to use max-width: 30em in place of width: 30em, for the responsive!

Answer 3

It was quite different, I hope that the modifications do not imply the rest of your layout.

.o-hero {
  background-color: #25385f;
  color: #fff;
  height: 30rem;
  width: 100%;
  text-align: center;
  display: table;
}
.o-hero__dialog {
  margin: auto;
  width: 30rem;
  display: table-cell;
  vertical-align: middle;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet" />
<section class="o-hero">
  <div class="o-hero__dialog">
    <h1 class="o-hero__title">Socialite is a awesome theme</h1>
    <p class="o-hero__desc">Perfect web architecture for high-end applications.</p>
    <a href="#">Buy this theme</a>
  </div>
</section>