Question: i need to make a div position absolute and make it in center but i used does not make it happen. i have gone crazy trying to make it to the center. 
i have tried using left and right value to 0. it should have made the div to the center automatically.
need to figure out what went wrong?

help please!

here is the code that i have tried and stuck

```
.slider-wrap {
    width: 1000px; 
    height: 500px; 
    left: 0; 
    right: 0; 
    top: 100px;
    background: #096; 
    z-index: 99; 
    margin: 0 auto;
}

```

Answer: 
You forgot to set the position to absolute

```
 .slider-wrap {
    width: 1000px; 
    height: 500px; 
    left:0; right:0; 
    top:100px; 
    background:#096; 
    z-index:99; 
    margin:0px auto;
}

```

Add `position:absolute;`

```
 .slider-wrap {
    position:absolute;
    width: 1000px; 
    height: 500px; 
    left:0; right:0; 
    top:100px; 
    background:#096; 
    z-index:99; 
    margin:0px auto;
 }

```
You need to add `position: absolute;` to your css for absolute positioning.

Note: Also add `position: relative;` to the *parent* element you whish to use as wrapper.

So for example:

```
.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    ...
}

.slider-wrap {
    position: absolute;
    ...
}

```

*The width and height of 100% is optional, just added it in case you want the container to take up the whole remaining space or the whole page if it's right after the opening body tag...*

To position the slider-wrap in the center of the screen (so both horizontal and vertical centered), try this:

```
html, body {
    width: 100%;
    height: 100%;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    ...
}

.slider-wrap {
    position: absolute;
    width: 1000px; 
    height: 500px;

    top: 50%;
    left: 50%;
    margin-top: -250px; // half the height
    margin-left: -500px; // half the width
    ...
}

```

If you're able to make the slider-wrap display inline with e.g. `display: inline-block;` (keep browser support in mind with this one), then you could use the following instead:

```
.slider-container {
    position: relative;
    width: 100%;
    height: 100%;

    text-align: center; // this one makes the slider-wrap center horizontally
    ...
}

.slider-wrap {
    position: relative;
    display: inline-block;
    width: 1000px; 
    height: 500px;

    vertical-align: middle; // this one does the vertical centering
    ...
}

```

Another option is using `display: table-cell;`. It's about the same as the previous one:

```
.slider-container {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;

    text-align: center;
    ...
}

.slider-wrap {
    position: relative;
    display: table-cell;
    width: 1000px; 
    height: 500px;

    vertical-align: middle;
    ...
}

```

Also `line-height: ?px;` will make vertical centering possible. But I think this answer is long enough now :-P

**Give it a try.** Fiddle around with this until you're happy with the result :-)