Summary of div (fixed width and unfixed width) center display method, div width

Summary of div (fixed width and unfixed width) center display method, div width

Today, I will summarize the method of implementing div center in css, some of which are fixed width and some are not fixed width.

1. Use auto margin to center DIV CSS

In CSS, the preferred way to center the elements horizontally is to use the margin Attribute-set the margin-left and margin-right attributes of the elements to auto. In practice, we can create a container div for these elements that need to be centered. Note that the width must be specified for the container:

div#container{  
 
margin-left:auto;  
 
margin-right:auto;  
 
width:168px;  
 
}

2. Use text-align to center DIV CSS

 

Another way to center an element is to use the text-align attribute to set the attribute value to center and apply it to the body element. This is a complete hack, but it is compatible with most browsers, so it is also essential in some cases.

It is hack because this method does not apply text attributes to text, but to elements used as containers. This also brings us extra work. After creating the div required for the layout, follow the code below to apply the text-align attribute to the body:

body{  
 
text-align:center;  
 
}

What will happen later? All child elements of the body are displayed in the center.

Therefore, we need to write another rule to bring the text back to the left-aligned by default:

p{  
 
text-align:left;  
 
}

It is conceivable that this additional rule will cause some inconvenience. In addition, browsers that fully follow the standard will not change the location of the container, but will only display the text in the center.

 

3. Combined with auto margin and text alignment

Because the text alignment div css center method has good downward compatibility, and the automatic margin method is also supported by most contemporary browsers, many designers combine the two, in order to maximize cross-browser support for the center effect:

body{  
 
text-align:center;  
 
}  
 
#container{  
 
margin-left:auto;  
 
margin-right:auto;  
 
border:1px solid red;  
 
width:168px;  
 
text-align:left  
 
}

However, this is always an hack, and it is not perfect in any case. We still need to write additional rules for text in the center container, but at least it looks good in various browsers.

 

4. negative margin Solution

 

The negative margin solution is far from simply adding negative margins to elements. This method requires both absolute positioning and negative margin.

The following describes how to implement the solution. First, create a container that contains the center element, and then position the container to 50% relative to the left edge of the page. In this way, the left margin of the container starts from the position of the page 50% width.

Then, set the left margin of the container to half the width of the negative container. In this way, the container is fixed to the point in the horizontal direction of the page.

#container{  
 
background:#ffcurl(mid.jpg)repeat-ycenter;  
 
position:absolute;  
 
left:50%;  
 
width:760px;  
 
margin-left:-380px;  
 
}

5. How to center the Div element without setting the width of the Div Element

The last method is also a problem recently encountered during responsive web development. How to center the div without setting the width is a problem, next I will explain how to center the div with no width set.

<Div class = "wrap">
<Div class = "inner"> center this div </div>
</Div>
. Wrap {
Float: left;/* adaptive content width */
Position: relative;
Left: 50%;}. inner {
Position: relative;
Left:-50%;
}

. Wrap uses float to make the. wrap width equal to the. inner width.
Let the left side of. wrap be online in the parent layer, and let the left side of. inner move half of. wrap to the left, so that. inner can be in the middle of. wrap's parent layer.

Personal blog address: www.pccxin.com