css水平中心を実現する方法

いつも水平中心についての文章を書きたいと思っています.水平中心は普段インタフェースを書くのに最もよく使われているからです.では、どのように実現するか、私は自分の経験とネット上の経験に基づいて、小さなまとめをしました.

シナリオ1:marginメソッド

最も簡単なmarginメソッド:

.center { width: 960px; /*        ，          */ margin:0 auto; }

利点:実現方法は簡単で分かりやすく、ブラウザの互換性が強い.
短所:拡張性が悪い

シナリオ2:inline-block水平中央を実現する方法

inline-blockプロパティのみがエレメントを水平に中央に置くことはできません.彼のポイントは、エレメントの親コンテナにtext-alignのプロパティを「center」に設定することです.そうすれば、

.father { text-align: center; }
.child { margin: 0 5px; display: inline-block; *display: inline; }

通常私がこの属性を使うときは直接

*{ text-align: center; }

そして、どの要素が自動的に中央に位置しないかを見て、marginや他の方法で設定するのは面倒ですが、inline-blockを設定したことがないので、後でinline-blockをよく検討します.ポイント:分かりやすく、拡張性が強い;
欠点:inline-blockのブラウザ互換性を追加で処理する必要があります.

シナリオ3:絶対位置決め水平中央を実現

非常に一般的な中央揃えです.

.father{ position:relative; }
.child{ position: absolute; width:    ; left: 50%; margin-left: -(   /2); }   

以下はw 3 plusから抜粋したコードですが、liがrelativeでなければならない理由も分かりません.皆さんは知っています.の時間があったら自分でやってみよう

.pagination { position: relative; }
.pagination ul { position: absolute; left: 50%; }
.pagination li { line-height: 25px; margin: 0 5px; float: left; position: relative;/*  ，     absolute，    */ right: 50%; }
.pagination a { display: block; color: #f2f2f2; text-shadow: 1px 0 0 #101011; padding: 0 10px; border-radius: 2px; box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808; background: linear-gradient(top,#434345,#2f3032); }
.pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }   

次のいくつかは私がよく使わないので、書かないで、上のいくつかのよく使う方法で十分だと思います.次のいくつかは私に時間を残してから検討します.

方案四：CSS 3のflex実現水平中位方法

シナリオ5：CSS 3のfit-content実現水平中央法

シナリオ6:フローティングによる水平中心の実現方法

出典:http://www.w3cplus.com/css/elements-horizontally-center-with-css.html