I am trying to create a div with multiple elements in the center of a section that has been set to 100% of screen height. However, I am facing an issue as the solution I implemented only seems to work on Google Chrome and not on other browsers. I have used properties like position:absolute, display:table, margins and top:0, bottom:0;
var section = document.querySelectorAll('section');
var winh = window.innerHeight;
header.style.height = winh+'px';
for (var i = 0; i <= section.length; i++) {
section[i].style.height = winh+'px';
}section {
padding:100px 0;
position:relative;
background:#222;
}
section div {
width:90%;
max-width:1200px;
margin:0 auto;
text-align:center;
position:absolute;
left:0;right:0;top:0;bottom:0;
display:table;
}<section class="users">
<div>
<div class="icon"><i class="fa fa-user" aria-hidden="true"></i></div>
<div class="count">15 000</div>
<div class="title">użytkowników</div>
</div>
</section>The design looks perfect on Chrome but is not rendering correctly on other browsers. The height of the section is being declared using JavaScript.
DEMO (view in more than one browser):