This is the first box. It is 600px wide and 300px tall but does NOT have any special margin instructions.

On the other hand it is has text-align: center so that the box's CONTENTS are centered including the image.

<div id="box1" style="
                                    width:500px; height:300px;
                                    background-color:yellow;
                                    text-align: center;">



This is the second box. It is 600px wide and 200px tall AND has a style setting of
margin: auto so that it automatically distributes "extra" space on BOTH sides, in effect CENTERING it.

<div id="box2" style="
                                    width:500px; height:200px;
                                    background-color:pink;
                                    margin: auto;
">