Position This Div In The Center Of It's Container?

Before you attempt to solve this please carefully read the constraints I'm dealing with. Constraints .pictureContainer needs to remain position: relative (because I have a hover

Solution 1:

Why not simply add:

text-align: center;

to pictureContainer css declaration. It will center any image in it.

Solution 2:

firts try to wrap your divclass="pictureContainer" and give css to the wrapper html

<divclass="wrapper"><divclass="pictureContainer"><imgid="currentPic"class="slideShowPic"src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg"width="350"alt="IMAGE" /><divclass="hoverMenu"><aclass="nextSlide"href="#">
                        >
                    </a><aclass="prevSlide"href="#">
                        <
                    </a></div></div></div>

css

.pictureContainer {
    width: 350px;
    position: relative;
    background: red;
    padding: 0;
    margin: 0;
}

#currentPic {
    vertical-align: top;
}
.wrapper {
    margin:auto;
    width: 350px;
}

working demohope this help

Solution 3:

Like the answer from @jhunlio suggests:

create a wrapper around it with the follwong css

.wrapper {
    margin:auto;
    width: 600px;
}

The trick here is that the width is fixed and the margin is set to auto.

It means that the margin (outer space) will be equally distributed at the sides of the wrapper with the fixed width. Hence it is in the middle.