How to solve vertical centralization bug in Firefox?

Navigation
3

The code below works perfectly in Chrome 46, Opera 32, Safari 9, but in Firefox 41 it 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 ideas how to solve this?

    
asked by anonymous 14.10.2015 / 04:05

3 answers

0

It was very different, I hope the changes 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>
    
14.10.2015 / 07:37
1

Here's 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" />
    
14.10.2015 / 04:30
1

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

"The display: table declaration 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, this should 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 avoiding too many tags."

[Source: Stack Overflow ]

These are statements that include both the CSS table attributes and the <table> tag itself. If the idea is not clear, I suggest you read the texts.

But what I really mean by all this is that there are better ways to do this, 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 to just remove the unnecessary attributes like position and absolute and their similar; display display display block in the child element and added display > flex for the parent element. It also redistributes the properties of color and text-align to the child, since it is who owns the texts. You may notice that the code gets a lot cleaner.

If you choose to use this solution, I recommend using vendor-prefixes (-webkit, -ms ...). Compatibility of Flex-box properties according to Can i use . Home | 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 basically made the same changes as in the example above, only this time the position absolute child element has been replaced by relative adding to it also the top and translateY properties that are responsible for vertical centering. To end a overflow hidden in the parent element to hide the leftovers.

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

NOTE: In the child element I recommend that you use max-width: 30em instead of width: 30em , for responsive!

    
14.10.2015 / 14:14
Select options line break that contains a very large value How to check / uncheck checkboxes by column using JQuery