diff --git a/app/src/main/assets/viewer.css b/app/src/main/assets/viewer.css
index 23fcef8..883b8c2 100644
--- a/app/src/main/assets/viewer.css
+++ b/app/src/main/assets/viewer.css
@@ -31,13 +31,14 @@ body {
     grid-column-start: 1;
 }
 
-canvas, .textLayer {
+canvas {
     display: inline-block;
     position: relative;
 }
 
 .textLayer {
     text-align: initial;
+    position: absolute;
     overflow: hidden;
     opacity: var(--text-layer-opacity);
     line-height: 1;
diff --git a/app/src/main/assets/viewer.js b/app/src/main/assets/viewer.js
index c27023a..7d6407c 100644
--- a/app/src/main/assets/viewer.js
+++ b/app/src/main/assets/viewer.js
@@ -64,6 +64,14 @@ function display(newCanvas, zoom) {
     }
 }
 
+function setLayerTransform(pageWidth, pageHeight, layerDiv) {
+    const translate = {
+        X: Math.max(0, pageWidth - document.body.clientWidth) / 2,
+        Y: Math.max(0, pageHeight - document.body.clientHeight) / 2
+    };
+    layerDiv.style.translate = `${translate.X}px ${translate.Y}px`;
+}
+
 function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
     pageRendering = true;
     useRender = !prerender;
@@ -85,6 +93,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
 
                 textLayerDiv.replaceWith(cached.textLayerDiv);
                 textLayerDiv = cached.textLayerDiv;
+                setLayerTransform(cached.pageWidth, cached.pageHeight, textLayerDiv);
                 container.style.setProperty("--scale-factor", newZoomRatio.toString());
             }
 
@@ -164,6 +173,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
                     newTextLayerDiv.style.height = newCanvas.style.width;
                     newTextLayerDiv.style.width = newCanvas.style.height;
                 }
+                setLayerTransform(viewport.width, viewport.height, newTextLayerDiv);
                 if (useRender) {
                     textLayerDiv.replaceWith(newTextLayerDiv);
                     textLayerDiv = newTextLayerDiv;
@@ -178,7 +188,9 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
                     zoomRatio: newZoomRatio,
                     orientationDegrees: orientationDegrees,
                     canvas: newCanvas,
-                    textLayerDiv: newTextLayerDiv
+                    textLayerDiv: newTextLayerDiv,
+                    pageWidth: viewport.width,
+                    pageHeight: viewport.height
                 });
 
                 pageRendering = false;
@@ -248,3 +260,7 @@ function loadDocument() {
         console.error(reason.name + ": " + reason.message);
     });
 }
+
+window.onresize = () => {
+    setLayerTransform(canvas.clientWidth, canvas.clientHeight, textLayerDiv);
+}