CSSはフローティング要素を水平に中央にする

定幅の非フローティング要素についてはmargin:0 autoを用いることができる.水平方向の中央揃えを行います.
不定幅のフローティング要素についても,その水平中心問題を解決する一般的なテクニックがある.次のようになります.
HTMLコード:

<div class="box">
    <p>     p>
    <p>      p>
div>

CSSコード:

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

これにより、フローティング要素が水平に中央に位置することが解決されます.
親エレメントと子エレメントは同時に左にフローティングし、親エレメントは相対的に左に50%移動し、子エレメントは相対的に右に50%移動するか、子エレメントは相対的に左に50%移動すればよい.