i have 3 main sections site i'm practising on: nav, header , section. header bar contains image text in middle, spent long time trying find how allow image accept text on top of , have go straight in centre(both vertically , horizontally) of img.
i found worked, after finding solution, section decided go on top of image, i'm because of position: absolute; on image.
the need; how section go under header, keeping piece of text on top of image , in centre of it?
* { box-sizing: border-box } body { margin: 0px; padding: 0px; background-color: #f2f2f2; } html { margin: 0px; padding: 0px; } #logo { height: 50px; width: auto; float: left; } nav ul { list-style-type: none; margin: 0; padding: 0; background-color: #1a1a1a; text-align: center; display: inline-block; width: 100%; } nav li { display: inline-block; } nav { display: inline-block; padding: 16px 15px; text-decoration: none; font-family: "open sans", arial; font-weight: bold; color: white; } nav a:hover { background-color: orange; color: white; } nav { margin-bottom: 0; } header { margin-top: 0; margin-bottom: 10px; width: 100%; height: auto; text-align: center; display: table; font-family: arial; font-size: 18px; color: orange; } h1 { margin: 0; padding: 0; vertical-align: middle; display: table-cell; } #bannerimage { height: 500px; width: 100%; position: absolute; z-index: -1; } section { background-color: white; font-family: arial; width: 100%; border: 1px solid #e7e7e7; text-align: center; }<nav> <ul> <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fe1qz4rgp.gif" /> <li><a href="game1.html" id="mybtn" onclick="disablelink()">game 1</a> </li> <li><a href="">game 2</a> </li> <li><a href="">game 3</a> </li> </ul> </nav> <header> <img id="bannerimage" src="http://static2.hypable.com/wp-content/uploads/2014/09/hogwarts-lake.png" /> <h1>codewarts</h1> </header> <section> <h2>welcome!</h2> <div id="content"> <p>do have name?.....great!</p> <p>insert in box below!</p> </div> </section>
do want somenthing this? 
header { position: relative; } header h1 { top: 50%; left: 50%; transform: translate(-50%,-50% )} 