Center div vertically and horizontally in fullscreen div

Question

I have a problem with centering div vertically and horizontally in another div that is fullscreen. The width and height of child div are fixed.

Here is the code:

html, body {
  height: 100%;
  margin: 0;
}
#header { 
  overflow: hidden;
  width:100%;
  height: 100%;

  background: orange;
  background-size:cover;
  -webkit-background-size:cover;

  display: table;
} 
#wrap {
  height: 200px;
  width: 500px;
  background:white;
  margin:0px auto;
}

<div id="header">
  <div id="wrap">
    <h1>Header</h1>
    <div id="some-text">Some text some text some text some text</div>
  </div>
</div>

possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Hashem Qolami, Sep 28 '14 at 19:46

score 5 · Answer 1 · answered Sep 27 '14 at 22:04

You can try absolute centering:

#wrap {
  /* Absolute centering: */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;

  /* It needs a height and a width: */
  height: 200px;
  width: 500px;
}

html, body {
  height: 100%;
  margin: 0;
}
#header { 
  overflow: hidden;
  width:100%;
  height: 100%;
  background: orange;
  background-size:cover;
  -webkit-background-size:cover;
  display: table;
} 

#wrap {
  height: 200px;
  width: 500px;
  background:white;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

<div id="header">
  <div id="wrap">
    <h1>Header</h1>
    <div id="some-text">Some text some text some text some text</div>
  </div>
</div>

Devin · Answer 2 · 2014-09-27T22:20:51.957

1

Simply change your CSS like this:

html, body {
    width:100%;
    height: 100%;
    margin: 0;
}
#header {
    overflow: hidden;
    width:100%;
    height: 100%;
    background: orange;
    background-size:cover;
    -webkit-background-size:cover;
}
#wrap {
    height: 200px;
    width: 500px;
    background:white;
    margin:0px auto;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-250px;
}

html, body {
  width:100%;
  height: 100%;
  margin: 0;
}
#header {
  overflow: hidden;
  width:100%;
  height: 100%;
  background: orange;
  background-size:cover;
  -webkit-background-size:cover;
}
#wrap {
  height: 200px;
  width: 500px;
  background:white;
  margin:0px auto;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-250px;
}

<div id="header">
  <div id="wrap">
    <h1>Header</h1>
    <div id="some-text">Some text some text some text some text</div>
  </div>
</div>

See fiddle here

Explanation:

This is one of the most common and oldest approaches to absolute centering elements with CSS when using fixed width elements. It simply consists in applying a position:absolute to the element and a top and left 50% value. While this sounds as it should work by itself, the element has properties of its own, such as width and height, so we need to apply a margin-left and margin-top equal to half of the size of the element (in this particular case, 100px and 250px)

edited Sep 27 '14 at 22:20

answered Sep 27 '14 at 22:02

Devin

7,690
6
39
54

Can you explain please? – Alex Char Sep 27 '14 at 22:13
1

yes sure, see edit, although it's a very known and common approach and I don't see yo asking for explanations to anyone else, there you go – Devin Sep 27 '14 at 22:16
This approach is problematic in case browser window is smaller than 200x500. – Oriol Sep 27 '14 at 22:46
his fixed size element is 200x500 so yes, absolutely any approach will be problematic if the browser window is smaller than 200x500. As a matter of fact, both your solution and mine will behave exactly the same, unless you mean something else – Devin Sep 27 '14 at 22:49
In your solution, upper and left parts of `#wrap` are hidden if window is smaller than 200x500. – Oriol Sep 27 '14 at 23:16
granted, you'll have scroll. In my solution, from the "NorthEast", in your solution, from "SouthWest". Guess people with 200x500px devices will need to live with that and make appropriate choices based on the weird devices they use. Really, can't believe such a trivial question is taking me such amount of time and going back and forth. If it makes you happy, I can delete it, I really didn't mean to cause all this problems – Devin Sep 27 '14 at 23:23

Center div vertically and horizontally in fullscreen div

2 Answers2