freeCodeCamp/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a3367417b2b2512ad0	使用 margin 屬性將元素水平居中	0	https://scrimba.com/c/cyLJqU4	301043	center-an-element-horizontally-using-the-margin-property

--description--

在應用設計中經常需要把一個塊級元素水平居中顯示。 一種常見的實現方式是把塊級元素的 margin 值設置爲 auto。

同樣的，這個方法也對圖片奏效。 圖片默認是內聯元素，但是可以通過設置其 display 屬性爲 block來把它變成塊級元素。

--instructions--

通過添加一個值爲 auto 的 margin 屬性，將 div 在頁面居中。

--hints--

div 應有一個 margin，設置爲 auto。

assert(code.match(/margin:\s*?auto;/g));

--seed--

--seed-contents--

<style>
  div {
    background-color: blue;
    height: 100px;
    width: 100px;

  }
</style>
<div></div>

--solutions--

<style>
  div {
    background-color: blue;
    height: 100px;
    width: 100px;
    margin: auto;
  }
</style>
<div></div>