Centered using flexbox

GrapheneOS · Aug 11, 2021 · 6895dfd · 6895dfd
1 parent 8a16b71
commit 6895dfd
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/app/src/main/assets/viewer.css b/app/src/main/assets/viewer.css
@@ -8,6 +8,13 @@ body, canvas, #padding {
     background: black;
 }
 
+html, body {
+  display: table;
+  height: 100%;
+  width: 100%;
+  text-align:center;
+}
+
 .textLayer {
     position: absolute;
     left: 0;
@@ -69,14 +76,9 @@ body, canvas, #padding {
     top: 0px;
 }
 
-#content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-
-  width: 100%;
-  height: 100%;
+#content-wrapper {
+	display: flex;
+	justify-content: center; /* center horizontally */
+	align-items: center;
+	height: 100%;
 }
diff --git a/app/src/main/assets/viewer.html b/app/src/main/assets/viewer.html
@@ -8,7 +8,9 @@
     </head>
     <body>
         <div id="padding"></div>
-        <canvas id="content"></canvas>
+        <div id="content-wrapper">
+            <canvas id="content"></canvas>
+        </div>
         <div id="text" class="textLayer"></div>
         <script src="viewer.js"></script>
     </body>