diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
index b0d9382d6..bf40ff811 100644
--- a/lib/text/ui_text_displayer.js
+++ b/lib/text/ui_text_displayer.js
@@ -640,6 +640,7 @@ shaka.text.UITextDisplayer = class {
    * See https://www.w3.org/TR/webvtt1/#webvtt-cue-position-alignment
    *
    * @param {!shaka.text.Cue} cue
+   * @return {!shaka.text.Cue.positionAlign}
    * @private
    */
   computeCuePositionAlignment_(cue) {
@@ -873,6 +874,12 @@ shaka.text.UITextDisplayer = class {
     // The positionAlign attribute is an alignment for the text container in
     // the dimension of the writing direction.
     const computedPositionAlign = this.computeCuePositionAlignment_(cue);
+    // According to the W3C WebVTT specification
+    // See: https://www.w3.org/TR/webvtt1/#webvtt-cue-position
+    // The position of the cue box depends on the cue alignment.
+    //   If align: start, then the position specifies the left edge.
+    //   If align: center, then it specifies the center of the cue box.
+    //   If align: end, then it refers to the right edge.
     if (computedPositionAlign == Cue.positionAlign.LEFT) {
       style.cssFloat = 'left';
       if (cue.position !== null) {
@@ -904,6 +911,9 @@ shaka.text.UITextDisplayer = class {
         } else {
           style.top = cue.position + '%';
         }
+        if (cue.size) {
+          style.transform = 'translateX(-50%)';
+        }
       }
     }
 
diff --git a/test/test/assets/screenshots/chrome-Android/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/chrome-Android/webvtt-ui-align-center-position-10-size-10.png
index 7a84ab01d..adef271ac 100644
Binary files a/test/test/assets/screenshots/chrome-Android/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/chrome-Android/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/chrome-Linux/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/chrome-Linux/webvtt-ui-align-center-position-10-size-10.png
index b44878deb..eb2dae434 100644
Binary files a/test/test/assets/screenshots/chrome-Linux/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/chrome-Linux/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/chrome-Mac/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/chrome-Mac/webvtt-ui-align-center-position-10-size-10.png
index debd76a76..38d36c83b 100644
Binary files a/test/test/assets/screenshots/chrome-Mac/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/chrome-Mac/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/chrome-Windows/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/chrome-Windows/webvtt-ui-align-center-position-10-size-10.png
index d1fb1a08b..a8e1dd55d 100644
Binary files a/test/test/assets/screenshots/chrome-Windows/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/chrome-Windows/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/firefox-Linux/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/firefox-Linux/webvtt-ui-align-center-position-10-size-10.png
index a5fa74782..aa60b9cc8 100644
Binary files a/test/test/assets/screenshots/firefox-Linux/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/firefox-Linux/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/firefox-Mac/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/firefox-Mac/webvtt-ui-align-center-position-10-size-10.png
index 368798993..38d36c83b 100644
Binary files a/test/test/assets/screenshots/firefox-Mac/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/firefox-Mac/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/firefox-Windows/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/firefox-Windows/webvtt-ui-align-center-position-10-size-10.png
index 48e7e9e17..2733bc55c 100644
Binary files a/test/test/assets/screenshots/firefox-Windows/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/firefox-Windows/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/msedge-Linux/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/msedge-Linux/webvtt-ui-align-center-position-10-size-10.png
index b44878deb..eb2dae434 100644
Binary files a/test/test/assets/screenshots/msedge-Linux/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/msedge-Linux/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/msedge-Mac/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/msedge-Mac/webvtt-ui-align-center-position-10-size-10.png
index 9f2d2ed90..777efc144 100644
Binary files a/test/test/assets/screenshots/msedge-Mac/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/msedge-Mac/webvtt-ui-align-center-position-10-size-10.png differ
diff --git a/test/test/assets/screenshots/msedge-Windows/webvtt-ui-align-center-position-10-size-10.png b/test/test/assets/screenshots/msedge-Windows/webvtt-ui-align-center-position-10-size-10.png
index d1fb1a08b..a8e1dd55d 100644
Binary files a/test/test/assets/screenshots/msedge-Windows/webvtt-ui-align-center-position-10-size-10.png and b/test/test/assets/screenshots/msedge-Windows/webvtt-ui-align-center-position-10-size-10.png differ