There is a block of headings that I want to place on the vertical center of the screen, regardless of screen size and cross-browser compatibility of ie8 + (flexbox will not work), and with the header and footer nailed to the top and bottom, respectively. It is now displayed normally for medium-sized screens, but on large ones the block is thrown up. How can this be done? fiddle

 header { height: 60px; text-align: center; } .headings { padding: 5% 0 15% 0; color: #fff; } .headings h1 { font-size: 40px; font-weight: 700; line-height: 1.2; text-align: center; color: rgb(102, 102, 102); text-shadow: 0px 6px 4px rgba(0, 0, 0, 0.2); margin: 0; } .headings h2 { font-size: 30px; font-weight: 700; line-height: 1.2; text-align: center; color: rgb(181, 181, 181); margin: 0 0 10px 0; } p { text-align: center; } 
 <header class="sticky" id="header"> <nav>Menu</nav> </header> <div class="headings"> <h1>Заголовок</h1> <h2>Описание</h2> <p><a href="#">телефон</a> </p> </div> <footer> <p>&copy; copyright</p> </footer>

    3 answers 3

    Here is to align with the vertical center:

      body {height:100%; position:relative;} headings { position: absolute; top: 50% transform: translateY(-50%); #либо translateY(- половина высоты блока в px) }

    For header:

      header { position: absolute; top: 0; }

    For footer:

      footer { position: absolute; bottom: 0; }

    UPD: footer, header

    • Alternatively, you can still implement Javascript - I. Kotov
    • that's what happens in your decision. jsfiddle.net/xdkrxtn1/1 What are you - where else to hang scripts for such operations - Vasya

    That's probably so, if I do not understand something - write

     * { margin: 0; } html, body { height: 100%; } .wrapper { width: 100%; min-height: 100%; position: relative; } header, footer { width: 100%; height: 100px; } header { background: blue; } main { width: 100%; padding-bottom: 100px; background: #fff; } main p { width: 90%; margin: auto; font-size: 30px; } footer { background: red; position: absolute; bottom: 0; } section { width: 50%; height: 40%; border: 1px solid; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #fff; } 
     <div class="wrapper"> <header></header> <main> <p> Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p> </main> <section></section> <footer></footer> </div>

    • so what do you actually want to do? Why did you invent another structure and what did you want to display as a result? - John
    • I showed you the centering of the block which is in the center, then I showed how to press the footer to the bottom, just everything in one layout, in your case - the description title and the phone to insert into the central block if you do not need to skip everything else - user33274
    • well i in fact - like this, yes? why did you ask main padding-bottom ? jsfiddle.net/o8fh51oa - John
    • This is to ensure that main itself does not cling to the footer, but there you can see it all - one of the technologies for pressing the footer - user33274

    Looks like I found the right solution (feedl) :

     * { margin: 0; padding: 0; } header { height: 60px; text-align: center; } .headings { position: absolute; top: 50%; height: 140px; width: 100%; margin-top: -50px; color: #fff; text-align: center; } .headings h1 { font-size: 40px; font-weight: 700; line-height: 1.2; text-align: center; color: rgb(102, 102, 102); text-shadow: 0px 6px 4px rgba(0, 0, 0, 0.2); margin: 0; } .headings h2 { font-size: 30px; font-weight: 700; line-height: 1.2; text-align: center; color: rgb(181, 181, 181); margin: 0 0 10px 0; } footer { position: absolute; bottom: 0; text-align: center; width: 100%; } p { text-align: center; } 
     <header class="sticky" id="header"> <nav>Menu</nav> </header> <div class="headings"> <h1>Заголовок</h1> <h2>Описание</h2> <p><a href="#">телефон</a> </p> </div> <footer> <p>&copy; copyright</p> </footer>