0

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

Fede
  • 1,656
  • 4
  • 24
  • 42
  • 1
    possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) – Hashem Qolami Aug 31 '14 at 09:23
  • Also take a look at: http://stackoverflow.com/questions/14113676/vertically-center-a-div-with-variable-height-within-a-div-that-is-100-of-the-vi?rq=1 – Hashem Qolami Aug 31 '14 at 09:23
  • Unfortunately, this requires you to set a fixed height on the container (why, browsers, why???). – Michael Aaron Safyan Aug 31 '14 at 09:29
  • If the centred div is fixed size, `position:absolute;top:50%;margin-top:-200px;` (for a 400px high div. you get the idea) – Dave Aug 31 '14 at 09:40

1 Answers1

1

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):

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164