前言

PCでもモバイル端末でも、親要素内に子要素が包まれているのに、子要素の幅が未知で、どのように子要素を左右に中央に置くのかという問題によく遭遇します.実戦訓練、資料検索を経て、以下の3つの方法が最良の解決策だと感じて、必要な学生は見て、互いに交流して、共に勉強することができます.

0.以下の3つのシナリオのトピックhtml構造は以下の通りである。

1.flexレイアウト

      :  CSS   ,flex  ,                    .    display    flex,  align-atem  ,        ,       .

.parent{
  width:600px;
  height:300px;
  background:red;
  display:flex; 
  justify-content: center; 
  align-items: center; 
}
.child{
  background:green; 
}

2.位置決め+transform

第2の態様は、位置決めとtransformの属性に基づいて実現する.まず、子要素は親要素に対して絶対的に位置し、子要素の左上隅が水平に垂直に中央になるようにする.子要素は未知の幅と高さであるため、marginを自身の50%で上から左に移動すればよく、transformのtranslate属性を使って完璧に解決する.

.parent{
  width:600px;
  height:300px;
  background:red;
  position:relative; 
}
.child{
  background:green;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

3. text-align+inline-block

第3のスキームはinline-blockの属性に基づいて実現され、この水平中心の方法についてはあまり紹介する必要はないかもしれないが、すべての主流ブラウザはtext-align属性をサポートし、centerを取るだけでよい.コードは簡単ですが、inline-blockによる間隔の問題は複雑なレイアウトに影響します.

.parent{
 width:600px;
  height:300px;
  background:red;
  text-align:center; 
}
.child{
  background:green;  
  display:inline-block;
}

実はいくつか浮動の方案を使って、およびdisplay:tableの方案も実現することができて、ただ個人は上述の3種類の方法がやはり応用するのが比較的に多いと感じて、先端の開発の過程、互換性の問題は迂回できない壁で、多く総括して自分の解決の方案を探し当てるのが最も重要です.