How CSS allows floating elements to be horizontally centered _javascript tips

For fixed-width, non-floating elements we can use margin:0 Auto to center horizontally in CSS, and we also have a common technique for variable-width floating elements to solve its horizontal center problem. There are a number of ways to solve the problem of horizontal center, let's share some three methods, hoping to help everyone.

Method One:

1, HTML part:

<div class= "box" >
 <p> I am floating </p>
 <p> I am also the center of </p>
</div>

2, the CSS section:

. box{
 Float:left;
 position:relative;
 left:50%;
}
p{
 Float:left;
 position:relative;
 right:50%;
}

So it seems very simple, the parent element and child element float at the same time, then the parent element moves relative left 50%, then the child element moves relative to the right 50%, or the child element moves relative to the left-50% also can. So simple and so magical.

Method Two:

HTML Code

<! DOCTYPE html>  

The parent element and child element float at the same time, then the parent element moves 50% relative to the left, then the child element moves relative to the left-50%.

Method Three:

HTML code

<! DOCTYPE html>  

Here also can set up a layer of left:-50%, more reasonable, can also avoid some unnecessary IE bugs. Extrapolate, this float element is centered in a way that can be extended to many situations that require floating elements to be centered.

Above through three kinds of methods to explain how CSS let floating element level center, follow-up this site will continue to update on JS, JQ, CSS, PHP, C # and other programming knowledge, please pay attention to this site, thank you.