MessageBox: fix text blur due to translating half pixel

packages/message-box/src/main.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="el-message-box__wrapper">
-    <transition name="msgbox-fade">
-      <div class="el-message-box" v-show="value">
+  <transition name="msgbox-fade">
+    <div class="el-message-box__wrapper" v-show="value" @click.self="handleWrapperClick">
+      <div class="el-message-box">
         <div class="el-message-box__header" v-if="title !== ''">
           <div class="el-message-box__title">{{ title }}</div>
           <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
@@ -19,8 +19,8 @@
           <el-button ref="confirm" :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')">{{ confirmButtonText }}</el-button>
         </div>
       </div>
-    </transition>
-  </div>
+    </div>
+  </transition>
 </template>
 
 <script type="text/babel">
@@ -101,6 +101,12 @@
         }
       },
 
+      handleWrapperClick() {
+        if (this.closeOnClickModal) {
+          this.close();
+        }
+      },
+
       handleAction(action) {
         if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
           return;

packages/theme-default/src/message-box.css

@@ -7,10 +7,9 @@
 @component-namespace el {
 
   @b message-box {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
+    text-align: left;
+    display: inline-block;
+    vertical-align: middle;
     background-color: #fff;
     width: var(--msgbox-width);
     border-radius: var(--msgbox-border-radius);
@@ -18,8 +17,24 @@
     -webkit-user-select: none;
     overflow: hidden;
     backface-visibility: hidden;
+    @e wrapper {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      text-align: center;
+      &::after {
+        content: "";
+        display: inline-block;
+        height: 100%;
+        width: 0;
+        vertical-align: middle;
+      }
+    }
 
     @e header {
+      position: relative;
       padding: 20px 20px 0;
     }
 
@@ -128,22 +143,22 @@
 
 @keyframes msgbox-fade-in {
   0% {
-    transform: translate3d(-50%, calc(-50% - 20px), 0);
+    transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
   100% {
-    transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 }
 
 @keyframes msgbox-fade-out {
   0% {
-    transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
   100% {
-    transform: translate3d(-50%, calc(-50% - 20px), 0);
+    transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
 }