; -table および inline-flex.
デモ
ブロック要素の水平方向のセンタリング
ブロック要素 (display:block) の水平方向のセンタリングを実現するには、その左右のマージン margin-left と margin-right を設定するだけです To auto , ブロック要素を水平方向に中央揃えにするための CSS 設定は次のとおりです:
1 #container{2 text-align:center; 3 }
ログイン後にコピー
Demo
複数のブロック要素の水平方向の中央揃えを実現するには
水平方向に配置されたブロック要素を中央に配置する場合、従来の方法では、水平方向に配置するブロック要素を display:inline-block に設定し、親要素に text-align:center を設定して、上記の inline 要素と同じ一貫性を実現します。水平方向のセンタリングと同じ効果があります。
1 #center{2 margin:0 auto;3 }
ログイン後にコピー
Demo
Flexboxを使用して複数のブロック要素の水平方向の中央揃えを実現します
使用する前に、まず
flexboxを導入してください。
Flexbox レイアウト (フレキシブル ボックス) モジュールは、サイズが不明または動的であっても、コンテナー内の項目のレイアウトを作成、調整、配布するためのより効率的な方法を提供するように設計されています。これは CSS3 の新しいレイアウト モードで、最新のネットワークにおけるより複雑な Web ページ要件に合わせて設計されています。
Flexbox はブラウザーですぐにサポートされました。この記事で説明されているように、Chrome 22 以降、Opera 12.1 以降、Opera Mobile 12.1 以降、および Firefox 18 以降はすでに Flexbox をサポートしています。
フレックスボックスの使い方を学びましょう
要素のフレックスボックスレイアウトを設定するには、display属性値をflexに設定するだけです。
1 #container{2 text-align:center;3 }4 5 #center{6 display:inline-block;7 }
ログイン後にコピー
フレックスボックスはデフォルトでブロックレベルの要素になります。インラインレベルの要素として定義する必要がある場合も同様です。
1 #container {2 display: flex;3 }
ログイン後にコピー
フレックスボックスはフレックスコンテナとフレックスアイテム。要素の表示プロパティを flex または inline-flex に設定することで、フレックス コンテナーを取得できます。 flex に設定されたコンテナはブロックレベル要素としてレンダリングされ、inline-flex に設定されたコンテナはインライン要素としてレンダリングされます。フレックスに設定されている各コンテナーの内部要素はフレックス アイテム、つまり格納可能なアイテムになります。簡単に言うと、flex は flex コンテナ内の flex 項目をどのようにレイアウトするかを定義します。
本題に戻り、複数のブロック要素の水平方向の中央揃えを実現するには、フレックスボックスを使用します。 親コンテナの CSS を次のように設定するだけです。既知の高さと幅を持つ要素
方法 1.
絶対的な配置と負のマージンの実装。
絶対配置を使用し、要素の上と左の属性を 50% に設定し、マージンを使用して要素を高さと幅の半分に戻し、垂直方向の中央揃えを実現します。コアの CSS コードは次のとおりです:
1 #container {2 display: inline-flex;3 }
ログイン後にコピー
Demo
方法 2.
絶対的な配置とマージン。
この方法でも絶対位置とマージンを使用しますが、垂直方向に中央に配置された要素の高さと幅を知る必要はありません。コアコードは次のとおりです:
rrree
(上と同じなのでスクリーンショットはありません)
Demo
高さと幅が不明な要素の水平方向と垂直方向のセンタリング
方法 1. 要素が中央に配置される要素が inline または inline-block 要素である
中央に配置される要素が inline または inline-block の場合、text-align:center およびvertical-align を使用して、親コンテナーを display:table-cell に賢く設定できます。中央で水平方向と垂直方向のセンタリングを実現します。
コアコードは次のとおりです:
1 #container{2 justify-content:center;3 display:flex;4 }
ログイン後にコピー
デモ
方法 2. Css3 の威力を示す
Css3 の変換を使用して高さを簡単に変更する未知の要素の幅要素の実装を垂直方向に中央揃えにします。
コアコードは以下の通りです:
1 #container{ 2 position:relative; 3 } 4 5 #center{ 6 width:100px; 7 height:100px; 8 position:absolute; 9 top:50%;10 left:50%;11 margin:-50px 0 0 -50px;12 }
ログイン後にコピー
Demo
法三. flex布局轻松解决
使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。
核心代码如下:
1 #container{2 display:flex;3 justify-content:center;4 align-items: center;5 }6 7 #center{8 9 }
ログイン後にコピー
Demo
一些总结
CSS3的transform和flex固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。
某些浏览器仍需使用前缀写法:
1 .flexboxtest{2 display: flex;3 display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀4 }
ログイン後にコピー
浏览器对最新版本的flexbox 的支持情况如下:
Chrome 29+ Firefox 28+ Internet Explorer 11+ Opera 17+ Safari 6.1+ (prefixed with -webkit-) Android 4.4+ iOS 7.1+ (prefixed with -webkit-)
文中介绍的flex用法只是一小部分,flex还有着其他强大的功能。本文主要介绍水平垂直居中的方法,具体的flex教学,可以移步:图解CSS3 Flexbox属性
原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。