The first centering method:
Use Margin:auto;
This should be the most use of the center, but also has limitations, the center of the element needs to set the width, and is a block element only line, and can only achieve horizontal center, the principle of this method is to allow the browser to automatically calculate the left and right margin to achieve the center;
<class= "Big"> <class= " Small "></div></div> . big{ width:200px; height:100px; Background:blue; } . small{ width:50px; height:50px; Background:orange; margin:0 auto; }
Second Centering method:
Use Text-align:center to achieve the center, the center of the picture inside the container, text can be very convenient to achieve the center. Set Text-align:center directly to the parent element;
The third way of centering:
Using Table-cell to achieve the center, this method can achieve horizontal vertical center, but need to coat a layer of label; ie8+ effective
<Divclass= "Big"> <Divclass= "Big-small"> <Divclass= "small"></Div> </Div> </Div>. big{width:200px; height:100px; Background:blue; display:table; }. big-small{Display:table-cell; Text-align:center; Vertical-align:middle; }. small{width:50px; height:50px; Background:orange; margin:0 Auto; }
The fourth type of centering method:
Use Position:absolute Center, can achieve horizontal vertical center;
Browser compatibility is good, but you must explicitly declare the height of the outer container element; Take a look at the code:
<class= "Big"> <class= " Small "></div> </div> . big{ position:relative; width:200px; min-height:100px; Background:blue; } . small{ width:50px; height:50px; Background:orange; Position:absolute; Top:0;left:0;bottom:0;right:0;margin:auto; }
The fifth type of centering method:
Use CSS Translate center, also can achieve horizontal vertical center, but use transform need prefix, only support ie9+, external container need to set height, if content contains text, text may appear blurry;
< div class = "Big" > < div class = "small" ></ div > </ div > .big{position:relative; width:200px; min-height:100px; Background:blue; }. small{width:50px; height:50px; Background:orange; Position:absolute; Transform:translate ( -50%,-50%); top:50%;left:50%; }
The principle of this approach is that the element that needs to be centered is absolutely positioned within the container, then set top:50%;left:50%, so that the element is half the height of the container, and the left side is half the width of the container. Then use translate to center the element halfway to the left of its width and height;
Sixth way:
Use Flexbox to center, set Display:flex for parent container, this method is simple, and the new version of the browser is supported.
<Divclass= "Big"> <Divclass= "small">That's what I want.</Div> </Div>. big{position:relative; width:400px; height:100px; Background:blue; Display:flex; Justify-content:center; Align-items:center; }. small{width:100px; height:50px; Background:orange; }
Seventh Way:
Center with Calc Dynamic calculation, also horizontal vertical center
. big{ position:relative; width:400px; height:100px; Background:blue; } . small{ width:40%; height:50px; Background:orange; Position:absolute; Top:calc (50%-20%); Left:calc (50%-20%); }
If only 50%, the upper-left corner of the inner element is in the center of the container, obviously does not conform, so let the element move up to the left half of itself, to achieve the center. Note: Calc (50%-20%); when it is a calculating formula, the minus sign needs a space, otherwise it can't be recognized.
Reference blog:
http://www.75team.com/
CSS Centering method detailed