0

I am trying to center a div on page, but its not working.

I need to use Position: Relative on the style of the div, because if I don't use it, the entire div won't appear on page!

Here is the style right now:

#page-wrap {
    width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 300;
    background: rgba(0,0,0,0.7);
    overflow: hidden;
    padding: 30px 50px;

    border-left: 10px solid rgba(255,255,255,0.2);
    border-right: 10px solid rgba(255,255,255,0.2);
}

The div is appearing on the top of the page, centered horizontally, but I want to center it vertically...

How can I do it?

Thanks alot in advance ;)

TiagoM
  • 3,458
  • 4
  • 42
  • 83
  • 1
    can u post ur code in a fiddle – user3218194 Jul 16 '14 at 11:35
  • 1
    This link at the end shows what you need to do. Basically you need to wrap that div inside another div and position the wrapper to relative. http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ – Kevin Zaki Jul 16 '14 at 11:52
  • Hey guys, this is the fiddle you requested http://jsfiddle.net/k5yYL/, having my code and the CSS. I can't put the page-wrap div centered vertically :s Can someone help me? Thanks alot ! – TiagoM Jul 16 '14 at 13:52
  • @Kevin Zaki I made a div using the class Absolute-Center, from the link you posted, to wrap my page-wrap div, but still didn't work.. – TiagoM Jul 16 '14 at 14:07

0 Answers0