CSS: Centering DIV

Question

I am having a problem with horizontally centering a DIV.

I have provided a full example here.

This is inside a Content Editor WebPart in SharePoint 2010 Standard.

Answer 1

http://fiddle.jshell.net/hdA7d/

<div class="weathercontainer">
        <div id="weather" class="items" onClick="window.open( 'http://www.weather.com/weather/today/33196','_blank' ); return false;  " >
        </div> 
</div>


.weathercontainer{
    width: 100%;
}
.items {
    width: 170px;
    margin: 0px auto;
    position: relative;
    cursor: pointer;
}

Answer 2

Like this

demo

css

.center
{
    left: 50%;
    position: absolute;
    top: 50%;
}

.center div
{
    border: 1px solid black;
    margin-left: -50%;
    margin-top: -50%;
    height: 100px;
    width: 100px;
}

Answer 3

You can just give the absolutely positioned .items a left and right position of 0 and a margin of auto:

.items {
    position:absolute;
    margin: 0px auto;
    left:0;
    right:0;
}

See this updated fiddle.

Answer 4

Check if this works for you. click here

display: table-cell;
vertical-align: middle;