[フロントエンド戦略] 最も包括的な水平方向および垂直方向のセンタリングソリューションとフレックスボックスlayout_html/css

[フロントエンド戦略] 最も包括的な水平方向および垂直方向のセンタリングソリューションとフレックスボックスlayout_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:45:54

オリジナル

1287 人が閲覧しました

最近、CSS レイアウトで多くの垂直方向の中央揃えの問題に遭遇しました。たとえば、固定長、固定幅、または可変の長さと幅を持つさまざまなコンテナーの垂直方向の中央揃えに関する解決策が多数あります。そして、CSS3 の flexbox の登場以降、さまざまなセンタリングの問題を解決することが容易になりました。フレックスボックスに関する記事を庭で探してみたところ、あまり詳しく書かれていない記事が多かったので、様々な垂直方向のセンタリング方法をまとめながらフレックスボックスについて紹介していきたいと思います。

単純なものから複雑なものまで:

インライン要素の水平方向の中央揃え

インライン要素 (、など) の水平方向の中央揃えを実現するには、インライン要素をブロックレベルでラップするだけです。親要素 (

; -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属性

原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

[フロントエンド戦略] 最も包括的な水平方向および垂直方向のセンタリング ソリューションとフレックスボックスlayout_html/css_WEB-ITnose

[フロントエンド戦略] 最も包括的な水平方向および垂直方向のセンタリングソリューションとフレックスボックスlayout_html/css_WEB-ITnose