0 votes
1 view
in Web Technology by (31.7k points)

I want to centre a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.

<body> 

<div>Div to be aligned vertically</div>

</body>

How can I centre a div vertically in all major browsers, including Internet Explorer 6?

1 Answer

0 votes
by (75.1k points)

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>

...