diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
index cf8b4dd2c..1abea608a 100644
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -311,10 +311,14 @@ Can be customized to show various content.
 ```
 :::
 
-### Align in center
-Align the content in center
+:::warning
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::
 
-:::demo set `center` to `true` will align the content in center
+### Centered content
+Content of MessageBox can be centered.
+
+:::demo Setting `center` to `true` will center the content
 
 ```html
 <template>
@@ -348,10 +352,6 @@ Align the content in center
 ```
 :::
 
-:::warning
-Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
-:::
-
 ### Global method
 
 If Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
@@ -370,10 +370,6 @@ import { MessageBox } from 'element-ui';
 
 The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
 
-:::warning
-Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
-:::
-
 ### Options
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
index 3a597d9d8..5296484f9 100644
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -309,10 +309,14 @@
 ```
 :::
 
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
 ### 居中布局
 内容支持居中布局
 
-:::demo 将 `center` 为 `true` 将采用居中布局
+:::demo 将 `center` 设置为 `true` 即可开启居中布局
 
 ```html
 <template>
@@ -346,10 +350,6 @@
 ```
 :::
 
-:::warning
-`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
-:::
-
 ### 全局方法
 
 如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：