title: How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?
body: <p>I can't seem to realise the following setup with html and css. I need 3 divs:</p>
  
  <ul>
  <li>header (fixed height)</li>
  <li>footer (fixed height)</li>
  <li>content (fixed aspect ratio, has to be centered and has to be "as big as possible")</li>
  </ul>
  
  <p>I have a spread of a book (an image) and I want it to be as big as possible. I'm planning on placing as a background image of the content div.</p>
  
  <p>I made this mockup to make things clear:</p>
  
  <p><img src="https://i.stack.imgur.com/b2FHM.png" alt="enter image description here"></p>
  
  <p>Anyone got any idea's how I can realise this?</p>