How to vertically center a div for all browsers?

Question

1 Answer

Vishal · Answer 1 · 2019-08-14T11:27:53+0000

If you want to vertically centre a div for all browsers the best solution is to build vertically and horizontally centre a fixed-width, flexible height content box. It works for all recent versions of Firefox, Opera, Chrome, and Safari.

See the code below:-

.outer{
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle{
display: table-cell;
vertical-align: middle;
}
.inner{
margin-left: auto;
margin-right: auto;
width: 400px;
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>

How to vertically center a div for all browsers?

1 Answer

Related questions

Browse Categories