CSS: How to center a div

In order to center a div:

1. Always use a extra outer div to make other div center
2. Outer div width will be 100% and inner div width will be fixed. In other word outer div width will be greater than inner div and then inside the inner div margin: 0px auto will center the inner div. 
3. margin: 0px auto; in the inner div
4. position: relative; outer div relative and inner div position: absolute for image only otherwise relative
5. text-align:center;
6. In order for margin: 0 auto; to work, in addition to display:block a width needs to be specified.
7. Without specifying margin-left and margin-right it is sometimes impossible to center a div. Center a div with absolute position is really hard. with absolute position margin:auto does not work.

<div id="outer">

    <div id="inner">Inner</div>

</div>

#outer

{

       /* The main container */

       text-align:center;

       width:100%;

       position:relative;

}

#inner

{

       /* The main container */

       text-align:center;

       width:700px;

       position:relative; // i needed it to be absolute

}

Sometimes position:absolute you need but position:absolute does not let div to be centered. Just remove the position:absolute; property for #inner

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 don't want to set a fixed width on the inner div you could do something like this: #outer { width: 100%; text-align: center; } #inner { display: inline-block; } That makes the inner div into an inline element that can be centered with text-align. Suppose that your div is 200px wide: .centered { position: fixed; left: 50%; margin-left: -100px; }

Center a div with absolute positioned:

margin: 0 auto; won't work for elements that are absolutely positioned. Instead, we can work with the properties of the element itself. Check out the fiddle...

http://jsfiddle.net/UnsungHero97/HnzyT/2/

To center it horizontally is easy since you know the width AND its positioned absolutely. All you have to do is give it 2 CSS properties:

width: 960px;
position: absolute;

/* ... other CSS properties... */

left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */

In order to fit an image inside a div:

1. Manually alter the width and height of the <img>. 
2. CSS: Display: block will fit the img inside the div

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

This will make the image expand to fill its parent, of which its size is set in the div CSS.
#container{
    width:300px;
    height:300px;
    border:1px solid black;
}
#image{
    position:relative; // i needed it to be absolute
    top:-200px;
}

How to center table inside a div:

I was doing like this
<div >
        <table align="center" class="table-main" >
        </table>
</div>
and as a result page was positioning on the left. Doing the align="center" in the div section solves the problem - as followed:

<div align="center" >

        <table class="table-main" >

        </table>

</div>

How to center a div elements. In this case div elements are aside.

CSS File:

.centerOuterDiv {

    max-width:960px;

    width:100%;

    margin: 0 auto;

}

.centerInnerDiv {

    width:100%;

    margin: 0 auto;

    text-align:center; // it will center the elements

}

    .centerInnerDiv aside {

        display:inline-block; //it will keep the elements in the same line like float

        margin:5px;

        padding:2px 5px;

        vertical-align:top;

    }

.consultancy {

    text-align:left; // it will push back the text to the left 

    width:210px;

    height:260px;

   

}

HTML File:

<div id="columns" class="centerOuterDiv">

        <div id="columns" class="centerInnerDiv">

       

        <aside>

            <div id="studentConsultancy" class="transitionDiv consultancy column" draggable="true">

                <a href="StudentConsultancy.aspx"><h3>Student Consultancy</h3></a>

                <ul>

                    <li><a href="">Career Counselling</a></li>

                    <li><a href="">University Selection Assistance</a></li>

                    <li><a href="">Admission Process Assistance</a></li>

                </ul>

            </div>

        </aside>

</div><!--end inner div-->

</div><!--end outer div-->