CODEWITHSUNDEEP
cssresponsive-designvertical-alignment
Fede
Fede

Reputation: 1716

centering a div vertically inside another div with 100% height

I want to center a div inside a div that has 100% height. basically the main div comes before the site. i upload a image so you can understand better what i want to do.

enter image description here

Upvotes: 0

Views: 1040

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99464

If using CSS Flexbox is an option, you could simply achieve that by displaying the container as flex box and align the inner div at the middle (horizontally and vertically) as follows:

EXAMPLE HERE

#intro {
    height: 100%; /* Or 100vh */

    display: flex;
    align-items: center;     /* Align the inner div vertically */
    justify-content: center; /* Align the inner div horizontally */
}

In this example, align-items and justify-content would make the inner div display at the middle of the #intro, vertically and horizontally.

By adding vendor prefixes, it should work on IE 10 as well. (I used Autoprefixer in the demo).

However in order to support old web browsers give this approach a try (take a look at Vertical Alignment section):

Upvotes: 1

Related Questions