How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How to horizontally center an element

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

How do I center a div in the middle of the page, even if I change the window size?

Maybe it is not working for you as container is absolute and hence the body has zero height.

Add height: 100% to html and body first.
Use centering method for absolutely positioned element using transform to container:
```
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
```

Let me know your feedback on this. Thanks!

html,body {  height: 100%;}* {  margin: 0;  padding: 0;}#container {  background-color: black;  border-radius: 10px;  padding: 5px;  display: block;  margin: 0 auto;  border-width: 1px;  border-color: black;  border-style: solid;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}.light {  height: 100px;  width: 100px;  display: block;  border-radius: 50%;  margin: 10px;  border-width: 5px;  background-color: grey;}

<body>  <div id="container" onclick="changeColor()">    <div id="green" class="light"></div>    <div id="yellow" class="light"></div>    <div id="red" class="light"></div>  </div></body>

How do you easily horizontally center a div using CSS?

In the case of a non-fixed width div (i.e. you don't know how much space the div will occupy).

#wrapper {  background-color: green; /* for visualization purposes */  text-align: center;}#yourdiv {  background-color: red; /* for visualization purposes */  display: inline-block;}

<div id="wrapper">        <div id="yourdiv">Your text</div></div>

How to horizontally center an element

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Positioning div element at center of screen

The easy way, if you have a fixed width and height:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.

How do I horizontally center a fixed div while having the width fit the content inside

Remove margin-left in code.

Set transform and left for horizontally center.

Modify width to 100%.

.tab {
    overflow: hidden;
    background-color: #505050;
    padding: 0;
    width: 100%;
    border-radius: 15px;
    position: fixed;
    top: 0;
    z-index: 10;
    transform: translateX(-50%);
    left: 50%;
}

How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page