docs(cn): utilities/container translation

utilities/container.md

@@ -1,48 +1,48 @@
-# Container
+# 容器 {#container}
 
-## Container
+## 容器 {#container}
 
-A component for fixing an element's width to the current breakpoint.
+将元素宽度固定到当前断点的组件。
 
-| Class     | Breakpoint     | Properties         |
-| :----     | :------------- | :----------------- |
+| 类名      | 断点           | 属性               |
+| :-------- | :------------- | :----------------- |
 | container | *None*         | width: 100%;       |
 |           | sm *(640px)*   | max-width: 640px;  |
 |           | md *(768px)*   | max-width: 768px;  |
 |           | lg *(1024px)*  | max-width: 1024px; |
 |           | xl *(1280px)*  | max-width: 1280px; |
 |           | 2xl *(1536px)* | max-width: 1536px; |
 
-### Usage
+### 用法 {#usage}
 
-To center a container, use the mx-auto utility:
+使用 `mx-auto` 工具类来使容器居中:
 
 ```html
 <div class="container mx-auto">
   <!-- ... -->
 </div>
 ```
 
-To add horizontal padding, use the `px-{size}` utilities:
+使用 `px-{size}` 工具类添加水平内边距:
 
 ```html
 <div class="container mx-auto px-4">
   <!-- ... -->
 </div>
 ```
 
-To use a container at only a certain breakpoint and up:
+仅在确切断点及以上大小使用容器:
 
 ```html
-<!-- Full-width fluid until the `lg` breakpoint, then lock to container -->
+<!-- `lg` 断点前保持全宽，后锁定容器大小 -->
 <div class="md:container md:mx-auto">
   <!-- ... -->
 </div>
 ```
 
 <Customizing>
 
-#### Centering by default
+#### 默认居中 {#centering-by-default}
 
 ```js
 // windi.config.js
@@ -55,7 +55,7 @@ export default {
 }
 ```
 
-#### Horizontal padding
+#### 水平内边距 {#horizontal-padding}
 
 ```js
 // windi.config.js
@@ -68,7 +68,7 @@ export default {
 }
 ```
 
-Specify a different padding amount for each breakpoint
+为每个断点指定不同的内边距大小
 
 ```js
 // windi.config.js