Skip to main content

--description--

Another positioning technique is to center a block element horizontally. One way to do this is to set its margin to a value of auto.

This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block.

--instructions--

Center the div on the page by adding a margin property with a value of auto.

--hints--

The div should have a margin set to auto.

assert(new __helpers.CSSHelp(document).getStyle('div')?.margin === 'auto');

--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>