Div centered to summarize

1.margin:auto to center elements, need to determine the width of the element, and need to be a block element

Eg:div {

width:200px;

height:200px;

Background: #222;

margin:0 Auto;

}

2. div > P both are block elements

div {

width:200px;

height:200px;

Background: #eee;

Margin:auto;

}

div>p {

width:60%;

Margin:auto;

font-size:14px/1.5 Arial,sans-serif;

}

3.

. container {  height:300px;  width:300px;  Background: #eee;  margin:10px Auto;  Position:relative;}. box {  height:100px;  width:100px;  Background: #222;  Position:absolute;  left:100px; 100 = (300-100)/2}

4.

. container {  height:300px;  width:300px;  Background: #eee;  margin:10px Auto;  Position:relative;}. box {  height:100px;  width:100px;  Background: #222;  Position:absolute;}

5.

. container {  height:300px;  width:70%;  Background: #eee;  margin:10px Auto;  Position:relative;}. box {  height:100px;  width:100px;  Background: #222;  Position:absolute;    /*centering Method 2*/  margin:0px 0 0-50px;  left:50%;}

6.

. container {  height:300px;  width:70%;  Background: #eee;  margin:10px Auto;  Position:relative;}. box {  height:100px;  width:70%;  Background: #222;  Position:absolute;    /*centering Method 2*/  margin:0px 0 0-35%;/* Half of 70%/*  left:50%;}

7.

. container {  height:300px;  width:300px;  Background: #eee;  Position:absolute;    Margin: -150px 0 0-150px;  left:50%;  top:50%;}. box {  height:100px;  width:100px;  Background: #222;  Position:absolute;    /*centering Method 2*/  margin: -50px 0 0-50px;  left:50%;  top:50%;}

8.

9.

. container {  height:400px;  width:400px;  Background: #eee;  margin:50px Auto;} H1 {  font:40px/1 Helvetica, Sans-serif;  Text-align:center;}

10.

. container {  height:200px;/*set line-height to this value*/  width:400px;  Background: #eee;  margin:150px Auto;}

H1 {  font:40px/200px Helvetica, Sans-serif;  Text-align:center;}

11.

. container {

  height:300px;  width:300px;  margin:150px Auto;  Background: #eee URL (http://lorempixum.com/100/100/nature/4) no-repeat;  Background-position:top Center;

}

12.

. container {  height:300px;  width:300px;  margin:150px Auto;  Background: #eee URL (HTTP://LOREMPIXUM.COM/100/100/NATURE/4) no-repeat Center;}

1. Important: Set the height of the element first
2. Use the following rules

    Position:absolute;    Margin:auto;    top:0; left:0; right:0; bottom:0;    Overflow:auto;

Consider multi-browser compatibility if display:table or display:inline-block;

3. Width height not fixed div horizontal center

HTML section

<Divclass="Container"> <div class= "center  "><a href=  "#" >1</a><a Span class= "PL-E" >href= "#" >2</ a><a href=  "#" >3</a> <div Span class= "PL-E" >style= "Clear:both" ></div></div>         

CSS Section

     . container{Width500pxHeight80pxBackground#C2300B;Margin-left:50pxPadding-top:10pxText-align:Center;}. center{DisplayInline-block;border:2px solid  #fff;} .center{_display:inline;} /* for IE6 hack*/.center a{float:< Span class= "PL-C1" >left; border:1px solid  #fff; padding:5px 10 PX; margin:10px; Color: #fff; none;}             

Code Highlights:

• Parent container container plus CSS property text-align:center;
• Sub-container Center plus CSS Property display:inline-block;
• . center{_display:inline; for IE6 hack

3. Width height not fixed div vertical center

HTML section

     <id="VC" ><id="Vci" ><id="Content" > We're vertically centered, we're horizontally centered. </div></div></div>          

CSS Section

     #vc {display:table;Background-color:#C2300B;Width500pxHeight200pxOverflowHiddenMargin-left:50px _PositionRelative }#vci {Vertical-align:Middle;display:table-cell; text-align:center; _position: Absolute _top:50%; _left: 50%;}  #content {color: #fff; border:1px solid  #fff; display:inline-block; _position: relative; _top:-50%; _ left:-50%;}         

Code Highlights:

• Parent Container VC CSS Property display:table;overflow:hidden;
• The CSS property Vertical-align:middle;display:table-cell of the VCI of the sub-container;
• _position:absolute;_top:50% for the Hack,vci container of the IE6; And the _position:relative of content containers; _top:-50%;
• If the horizontal center is not needed, the text-align:center;_left:50% of the VCI container should be commented out, and the content display:inline-block;_left:-50%;

4. Width height fixed horizontal vertical Center

HTML section

     <class="guding" ><class="gd" > centered </div></div> 

CSS Section

    . guding{Width500pxHeight200pxbackground: #c2300b; 50px; Position:relative;} .gd{width:50px; Height:20px; Background: #fff; absolute; Top:50%; Left:50%; Margin-top:-10px; Margin-left:-25PX;}           

Code Highlights:

• The parent container is position:relative with relative positioning, otherwise the child element is absolutely positioned relative to the browser window.
• The sub-container is absolutely positioned, and the value of the top:50%;left:50%;margin-top,margin-left takes the height of the container, half the width of the negative.

5. Then CSS3 came, using the Flexbox layout

Aside from compatibility, I think it's a perfectly centered, no need to consider the width and height values.

<id="Parent" >    <id="Item" >test</div></div> 

#parent {    display:flex;    Yellow;} -px;  -px;  /* magic! */}

Div Center to summarize