diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 878a4154cd..ee813a08e7 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -29,6 +29,10 @@ $timelineImageBorderRadius: 4px;
     top: 0;
     border-radius: $timelineImageBorderRadius;
 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     > canvas {
         border-radius: $timelineImageBorderRadius;
     }
@@ -43,17 +47,6 @@ $timelineImageBorderRadius: 4px;
     position: relative;
 }
 
-.mx_MImageBody_thumbnail_spinner {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-}
-
-// Inner img should be centered around 0, 0
-.mx_MImageBody_thumbnail_spinner > * {
-    transform: translate(-50%, -50%);
-}
-
 .mx_MImageBody_gifLabel {
     position: absolute;
     display: block;
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 96c8652aee..7be4373eba 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -440,9 +440,9 @@ export default class MImageBody extends React.Component<IProps, IState> {
     protected getPlaceholder(width: number, height: number): JSX.Element {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (blurhash) return <Blurhash hash={blurhash} width={width} height={height} />;
-        return <div className="mx_MImageBody_thumbnail_spinner">
+        return (
             <InlineSpinner w={32} h={32} />
-        </div>;
+        );
     }
 
     // Overidden by MStickerBody