Vertical centering via flexbox. You get horizontal centering for free.

lib/components/Centered.js

@@ -3,51 +3,15 @@ import React from 'react'
 export default class Centered extends React.Component {
 
   render() {
-    const h = this.props.hor
+    return <div style={{
-    const v = this.props.ver
+      display: 'flex',
-
+      flexDirection: 'column',
-    if (h && v) {
+      justifyContent: 'center',
-
+      height: '100%'}}>
-      return <div style={{
+      <div>
-        display: 'table',
+        {this.props.children}
-        width: '100%',
-        height: '100%'}}>
-        <div style={{
-          display: 'table-cell',
-          verticalAlign: 'middle',
-          textAlign: 'center'}}>
-          <div style={{display: 'inline-block'}}>
-            {this.props.children}
-          </div>
-        </div>
-      </div>
-
-    } else if (h && !v) {
-
-      return <div style={{textAlign: 'center'}}>
-        <div style={{display: 'inline-block'}}>
-          {this.props.children}
-        </div>
       </div>
-
+    </div>
-    } else if (!h && v) {
-
-      return <div style={{
-        display: 'table',
-        width: '100%',
-        height: '100%'}}>
-        <div style={{
-          display: 'table-cell',
-          verticalAlign: 'middle'}}>
-          {this.props.children}
-        </div>
-      </div>
-
-    } else {
-
-      return this.props.children
-
-    }
   }
 
 }

lib/components/DownloadPage.js

@@ -38,7 +38,7 @@ export default class DownloadPage extends React.Component {
   render() {
     switch (this.state.status) {
       case 'ready':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down"
@@ -51,7 +51,7 @@ export default class DownloadPage extends React.Component {
 
       case 'requesting':
       case 'downloading':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down" animated
@@ -63,7 +63,7 @@ export default class DownloadPage extends React.Component {
         </Centered>
 
       case 'cancelled':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down"
@@ -75,7 +75,7 @@ export default class DownloadPage extends React.Component {
         </Centered>
 
       case 'done':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down"

lib/components/DropZone.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import Centered from './Centered'
 
 export default class DropZone extends React.Component {
 

lib/components/UploadPage.js

@@ -48,7 +48,7 @@ export default class UploadPage extends React.Component {
       case 'ready':
 
         return <DropZone onDrop={this.uploadFile.bind(this)}>
-          <Centered ver>
+          <Centered>
 
             <Spinner dir="up" />
 
@@ -65,7 +65,7 @@ export default class UploadPage extends React.Component {
         </DropZone>
 
       case 'processing':
-        return <Centered ver>
+        return <Centered>
 
           <Spinner dir="up" animated />
 
@@ -77,7 +77,7 @@ export default class UploadPage extends React.Component {
       case 'uploading':
         var keys = Object.keys(this.state.peerProgress)
         keys.reverse()
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="up" animated {...this.state.file} />