How to put a <div> inside another <div> in the middle (vertically) when using absolute position?

I'm an inexperienced HTML learner, so please bear with me.

I'm trying to make a <div> (#banner) stay in the center of the browser even if resized; so I figured I would need another <div> as the #container of the entire browser.

#banner needs to extend its width 100% so I had to use the absolute position.

Even though I have already looked at several other posts here in stackoverflow - I can't figure how to implement their solutions to my particular case.

HTML

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div>
   <div id="banner">
   </div>
</div>
</body>
</html>

CSS

#container{

}
#banner{
    background-color: #e51400;
    height: 400px;
    position: absolute;
    left: 0px;
    right: 0px;
    font-weight: bold;
    text-align: center;
    vertical-align:middle;
}

This is basically what I'm trying to accomplish

Do I really need another <div> besides #banner in order to put it in the center ?

Answers


Well, I was able to answer my own question due to the tremendous amount of replies I got. Anyways, thanks to this page I was able to tweak the code to how I need it in this case.

Here's my final code:

CSS

 #container {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  overflow: visible;
  background-color:black;
}

#banner {
  height: 400px;
  position: absolute;
  top: -200px; //needs to the negative value of half the height
  left: 0px;
  right: 0px;
  background-color:red;
}

Need Your Help

stop service after execution

android service locationlistener

Hi I am writing program which fetches users current lattitude and longitude every 5 minutes using Alarmmanager and store the value in shared preferences.I want to run this search backgroun so iam u...

main() sometimes keeps frame pointer with -fomit-frame-pointer on x86

c gcc assembly x86 x86-64

I accidentally discovered some strange thing about the -fomit-frame-pointer with GCC on x86 when I was doing homework.