2018-09-30 22:01:58 +00:00
---
id: 587d78a3367417b2b2512ad0
title: Center an Element Horizontally Using the margin Property
challengeType: 0
videoUrl: 'https://scrimba.com/c/cyLJqU4'
2019-08-05 16:17:33 +00:00
forumTopicId: 301043
2021-01-13 02:31:00 +00:00
dashedName: center-an-element-horizontally-using-the-margin-property
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
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.
2018-09-30 22:01:58 +00:00
2021-02-01 19:56:07 +00:00
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` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2021-02-01 19:56:07 +00:00
Center the `div` on the page by adding a `margin` property with a value of `auto` .
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2021-02-01 19:56:07 +00:00
The `div` should have a `margin` set to `auto` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(code.match(/margin:\s*?auto;/g));
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
div {
background-color: blue;
height: 100px;
width: 100px;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
< / style >
< div > < / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-28 18:13:38 +00:00
```html
< style >
div {
background-color: blue;
height: 100px;
width: 100px;
margin: auto;
}
< / style >
< div > < / div >
2018-09-30 22:01:58 +00:00
```