How to align a div to the middle (horizontally / width) of the page?
Matthew C.
The Problem
You have a div element that you want to center horizontally in the middle of a page. For example, you want to center a div with a class of “item” horizontally in another div with a class of “container” that is the width of the page:
<body> <div class="container"> <div class="item">horizontally centered</div> </div> </body>
How do you do this?
The Solution
One way to do this is to use Flexbox and center the div item horizontally using the justify-content CSS property:
.container { display: flex; justify-content: center; } .item { width: 100px; }
Alternatively, you can set the horizontal margin of the div item to auto:
.item { width: 100px; margin: 0 auto; }
When the margin is set to auto, the browser determines what margin to use. In this case, it centers the div.
Ask a questionImprove this Answer
Related Answers
- How do I add a tab space instead of multiple non-breaking spaces ("nbsp")?
- How do I auto-resize an image to fit a "div" container?
- How do I Create an HTML Button That Acts Like a Link?
- How do I vertically center text with CSS?
- How to align content of a div to the bottom
- How to change the CSS background opacity of an element
- How to disable text selection highlighting (css)
- How to make a div 100% height of the browser window?
- How to open a URL in a new tab (and not a new window)
- How do I overlay one div over another div?
- HTML text input - allow only numeric input
- Is there a CSS parent selector?
- Regex to match open HTML tags except for self-contained tags