if you work hard and follow your dreams, you too can center <div>s vertically

pixels.html

@@ -7,7 +7,22 @@ body {
   overflow: hidden !important;
   font-size: 11px;
 }
-.thumb {
+.thumbdiv {
+}
+.fcontainer
+{
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     flex-direction: column;
+     height: 100vh;
+}
+.fitem
+{
+     background-color: #f3f2ef;
+     border-radius: 3px;
+     width: 200px;
+     height: 100px; 
 }
 </style>
 <link rel="stylesheet" href="css/ui.css">
@@ -24,10 +39,13 @@ body {
 </div>
 
 <div id="notebook">
-  <!-- TODO: doesn't work properly when screen isn't exactly centered -->
-  <div id="thumbnaildiv" style="float:right;margin-top:20%;transform:scale(2);margin-right:10%">
+  <div style="width:60%;height:100%;position:absolute;left:0">
+    <div id="maineditor" class="fcontainer">
+    </div>
   </div>
-  <div id="maineditor" style="margin-left:10%;margin-top:5%;height:100%">
+  <div style="width:40%;height:100%;position:absolute;right:0">
+    <div id="thumbnaildiv" class="fcontainer">
+    </div>
   </div>
 </div>
 

src/pixed/pixeleditor.ts

@@ -39,13 +39,8 @@ export function PixelEditor(parentDiv:HTMLElement, fmt, palette, initialData, th
   this.getImageData = function() { return pixints.slice(0); }
 
   function fitCanvas() {
-    var w = $(parentDiv).width();
-    var h = $(parentDiv).height();
-    if (h > w)
-      pixcanvas.style.height = Math.floor(h)+"px";
-    else
-      pixcanvas.style.height = Math.floor(h/2)+"px";
-    // TODO
+    pixcanvas.style.height = '50%'; // TODO?
+    return;
   }
   this.resize = fitCanvas;
 
@@ -56,6 +51,7 @@ export function PixelEditor(parentDiv:HTMLElement, fmt, palette, initialData, th
   for (var i=0; i<pixints.length; i++) {
     pixints[i] = initialData ? palette[initialData[i]] : palette[0];
   }
+  this.canvas = pixcanvas;
 
   updateImage();
 
@@ -458,7 +454,7 @@ function pixelEditorCreateThumbnails(e) {
   allthumbs = [];
   for (var i=0; i<count; i++) {
     if ((i & 15) == 0) {
-      parentdiv = $("#thumbnaildiv").append("<div>");
+      parentdiv = $('<div class="thumbdiv">').appendTo("#thumbnaildiv");
     }
     allthumbs.push(createThumbnailForImage(parentdiv, i));
   }
@@ -474,6 +470,9 @@ function pixelEditorReceiveMessage(e) {
 function createThumbnailForImage(parentdiv, i) {
   var span = $('<span class="thumb">');
   var thumb = new PixelEditor(span[0], currentFormat, palette, allimages[i]);
+  // double size of canvas thumbnail
+  thumb.canvas.style.height = currentFormat.h*2+"px";
+  thumb.canvas.style.width = currentFormat.w*2+"px";
   parentdiv.append(span);
   span.click(function() { createEditorForImage(i) });
   return thumb;