CSS Centering method detailed

Source: Internet
Author: User

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:


CSS Centering method detailed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.