Horizontal centering of CSS floating elements

For the fixed width of non-floating elements we can use margin:0 auto; To center horizontally, we also have a common technique to solve the problem of horizontal centering for variable-width floating elements. The decomposition is as follows:

1. HTML part:

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

2. CSS part:

. box{
Float:Left
position:relative;
    left:< Span style= "color: #0000ff;" >50%;
"
P{
    float:left;
    position:< Span style= "color: #000080; Font-weight:bold; " >relative;
    right:< Span style= "color: #0000ff;" >50%;
/span>

So it seems simple, the parent and child elements are floating at the same time, then the parent element moves relative to the left by 50%, then the child element moves relative to the right 50%, or the child element moves relative to the left-50%. So simple and so magical.

Horizontal centering of CSS floating elements