html - Using CSS alone, how can I make a dynamically sized 4:3 aspect ratio div also stay centered? -


the html dead simple , i'm looking add few <div>s possible make code readability headache.

<!doctype html> <html>  <head>   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <meta name="viewport" content="width=720, user-scalable=yes" />   <title>sharpcraft</title>   <!-- stylesheets -->   <noscript>     <link rel="stylesheet" href="css/style.css" />   </noscript>   <!-- jquery -->   <script>   </script> </head>  <body>   <!-- #main -->   <main id="main">     <!-- #content -->     <div id="content">      </div>   </main> </body>  </html>

regrettably "style" of css development guess , check i've mutilated stylesheet beyond repair. know content div should follow following rules:

#content {   background: url("https://raw.githubusercontent.com/brianjenkins94/sharpcraft/master/sharpcraft/assets/graphics/ui/menu_background_with_title.png") no-repeat;   min-width: 640px;   min-height: 480px;   display: table; }

with end product resembling following:

end product

there many ways center element horizontally , vertically, suggest css table approach, you're doing on main content area, need ensure scroll bars work when window size rather small.

html, body, #table {      height: 100%;  }  body {      background: black;      margin: 0;  }  #table {      display: table;      width: 100%;  }  #main {      display: table-cell;      vertical-align: middle;  }  #content {      background: url("http://goo.gl/tvjkjw");      width: 640px;      height: 480px;      margin: 0 auto;  }
<div id="table">      <div id="main">          <div id="content"></div>      </div>  </div>

jsfiddle: http://jsfiddle.net/ykato61n/

(i adjusted markup make work)


-