CSS Horizontal centering mode

1. Text-align:center

This method is only suitable for inline elements or text in the block element is, the block element set this, then the elements of the text or inline elements are centered. Compatible with various browsers

<class= "Center1"> I am the Test text oh </div> <  class= "Center1"><span> I am Test label span  </span></div>

. center1{    text-align:center;}

2. margin:0 Auto

Margin:0 Auto; applies only to block elements, and is a block element to have a width, but it doesn't matter what label is placed in the block element. Compatible with various browsers

<class= "Center2"> I am a block element with width </div> 

. Center2 {    margin:0 Auto;     width:200px;     background: tan;}

3. display:table

This is a good way to use, but only compatible with ie8+ browser

<class= "Center3"> I am the div</div That tests the centered way display:table  >

. Center3 {    display: table;     margin:0 Auto;     background: springgreen;}

Sample code

CSS Horizontal centering mode