# freeCodeCamp Challenge Guide: Center an Element Horizontally Using the margin Property

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-center-an-element-horizontally-using-the-margin-property/301043>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 5:29am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-center-an-element-horizontally-using-the-margin-property/301043 "2019-08-03T05:29:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 3, 2019, 5:29am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-center-an-element-horizontally-using-the-margin-property/301043/1 "2019-08-03T05:29:10Z")

</div>

# [Center an Element Horizontally Using the margin Property](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property)

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```html
> <style>
> div {
> background-color: blue;
> height: 100px;
> width: 100px;
> margin: auto;
> }
> </style>
> <div></div>
> 
> ```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:59pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-center-an-element-horizontally-using-the-margin-property/301043/2 "2025-01-08T15:59:30Z")

</div>

Closed on January 8, 2025, 3:59pm UTC