--- id: 60a3e3396c7b40068ad6998a title: 步驟 32 challengeType: 0 dashedName: step-32 --- # --description-- 通過將 `margin` 設置爲 `auto`,使 `.three` 元素在畫布上居中。 # --hints-- 應該將 `margin` 屬性設置爲 `auto`。 ```js const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); assert(marginFilter.length === 2); ``` `.three` 元素的 `margin` 值應爲 `auto`。 ```js const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); assert(threeMargin === 'auto'); ``` # --seed-- ## --seed-contents-- ```css .canvas { width: 500px; height: 600px; background-color: #4d0f00; overflow: hidden; } .frame { border: 50px solid black; width: 500px; padding: 50px; margin: 20px auto; } .one { width: 425px; height: 150px; background-color: #efb762; margin: 20px auto; } .two { width: 475px; height: 200px; background-color: #8f0401; margin: auto; } .three { width: 91%; height: 28%; background-color: #b20403; --fcc-editable-region-- --fcc-editable-region-- } ``` ```html Rothko Painting
```