ホームページ > 記事 > ウェブフロントエンド > CSS を使用してさまざまなセンタリング方法を実装する
CSS を使用してさまざまなセンタリング方法を実装する
- 不言オリジナル
- 2018-06-12 14:49:331459ブラウズ
この記事では、CSS を使用してさまざまなセンタリングを実現する方法を主に紹介します。これを必要とする友人に共有します。
レイアウトに CSS を使用するときによく遭遇する状況です。 。 CSS を使用してセンタリングを行う場合、単一の属性でできる場合もありますが、すべてのブラウザと互換性を持たせるために特定のスキルが必要な場合もあります。この記事では、センタリングの一般的な方法をいくつか簡単に紹介します。
注: 特に指定がない限り、この記事で説明する方法は、IE6 以降、Google、Firefox などの主流のブラウザーと互換性があります。
まず、シンプルで無害な中央揃えの方法について説明します
マージンを自動に設定します
具体的には、要素の margin-left と margin を中央揃え -right に設定します。 code> は auto に設定されています。このメソッドは水平方向のセンタリングのみを実行でき、浮動要素または絶対配置要素には無効です。 margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
使用 text-align:center
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
使用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
4、使用表格
如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效。
但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效，只能用表格自有的align属性。
使用display:table-cell来居中
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
那面所说的都是很基础的方法，自然不能称之为奇淫巧计，下面就来说一些需要使用一些技巧的居中方法。
使用绝对定位来进行居中
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
运行效果：
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top ,margin-top
display は inline)。 code> または <code>inline-block など) を水平方向の中央揃えに使用します。ただし、IE6 と 7 という 2 つの奇妙なブラウザでは、任意の要素を水平方向に中央揃えにすることができることに注意してください。 テキストの 1 行を垂直方向の中央に配置するには、line-height を使用します🎜🎜テキストの line-height をテキストの親コンテナの高さに設定します。これは、テキストが 1 行しかない状況に適しています。文章。 🎜🎜4. テーブルを使用する🎜🎜 テーブルを使用している場合は、td (場合によっては th) 要素の align="center" を使用するだけで済みます。 /code> と valign="middle" これら 2 つの属性は、内部のコンテンツの水平方向と垂直方向の中央揃えを完全に処理でき、テーブルはデフォルトで内部のコンテンツを垂直方向に中央揃えにします。 css でテーブルの内容の中央揃えを制御したい場合は、垂直方向の中央揃えに vertical-align:middle を使用できます。水平方向の中央揃えについては、 で行うようです。 >css 対応する属性はありませんが、IE6 および 7 では、text-align:center を使用してテーブル内の要素を水平方向に中央揃えにすることができます。IE8 以降、Google、Firefox、その他のブラウザ text-align:center はインライン要素でのみ機能し、ブロック要素には影響しません。 🎜🎜
ie6 および 7 では、
css を渡すことができます。 text-algin は、コンテンツがインライン要素であるかブロック要素であるかに関係なく、テーブル コンテンツの水平方向の配置を制御します。 🎜🎜ただし、IE8+ と chrome や firefox などのブラウザの text-align:center は、ブロック要素に対しては無効です。テーブル独自の align のみを使用できます。コード＞プロパティ。 🎜🎜display:table-cell を使用して中央に配置します🎜🎜テーブルではない要素については、display:table-cell を使用してテーブルのセルとしてシミュレートし、テーブルを使用できるようにします非常に便利なセンタリング機能。例:ただし、この方法はIE8以降でのみ使用できます。 Google、Firefox等のブラウザでご利用の場合、IE6、IE7では無効となります。 🎜🎜そこで紹介されている方法はどれも非常に基本的なもので、派手なトリックとは言えません。ここでは、いくつかのスキルを必要とするセンタリング方法を紹介します。 🎜🎜中央揃えには絶対位置を使用します🎜🎜 この方法は、幅または高さがすでにわかっている要素に対してのみ機能します。 🎜🎜絶対配置の原則は、絶対配置要素の
left 属性または top 属性を 50% に設定することです。要素は中央に配置されていませんが、要素の幅または高さの半分だけ中央の位置から右または左にオフセットされているため、負の margin-left または margin を使用する必要があります。 - top の値は、要素を中央の位置に戻すために使用されます。負の margin 値は、要素の幅または高さの半分です。 運用効果:
🎜🎜センタリングのみを実現したい場合一方向の場合、水平方向の中央揃えを実現するには left と margin-left のみを使用し、top と margin-top を使用して垂直方向に中央揃えにします。 🎜🎜絶対位置を使用して中央揃えする別の方法🎜🎜この方法も、幅または高さがすでにわかっている要素に対してのみ機能し、残念ながら、IE9+、Google、Firefox、およびその他の最新の w3c 準拠のブラウザーのみをサポートします。 🎜<p>以下は、このメソッドを理解するためのコードです: <br><img src="https://img.php.cn/upload/article/000/000/009/c5987c2a4a353965fc763fe1bf1fe6a3-7.png" alt=""><br>操作の効果: <br><img src="https://img.php.cn/upload/article/000/000/009/c5987c2a4a353965fc763fe1bf1fe6a3-8.png" alt=""></p>
<p>要素の幅と高さがここで定義されていない場合、その幅は次の値によって決定されます。左右、高さは上下の値で決まるので要素の高さと幅を設定する必要があります。同時に、左、右、上、下の値を変更すると、要素を特定の方向にオフセットすることもできます。 </p>
<h2>フローティングおよび相対配置を使用して水平方向のセンタリングを実行します</h2>
<p>このメソッドは、フローティング要素を水平方向にセンタリングする方法の解決策でもあり、センタリングする必要がある要素の幅を知る必要はありません。 </p>
<p>フローティングセンタリングの原則は、フローティング要素を親要素の幅 <code>50% に対して相対的に配置することですが、この時点では要素はまだセンタリングされておらず、中心位置の半分です。幅を指定するには、その内部の子要素に対して相対位置を使用して、それ自体の幅の余分な半分を引き出す必要があります。また、相対位置はそれ自体に対して相対的に配置されるため、それ自体の幅の半分を取得するだけで済みます。 left または right を 50% に設定するため、実際の幅を知る必要はありません。 50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。
看下代码：
运行效果：
利用font-size来实现垂直居中
如果父元素高度是已知的，要把它里面的子元素进行水平垂直居中，则可以使用这种方法，且子元素的宽度或高度都不必知道。
该方法只对IE6和IE7有效。
该方法的要点是给父元素设一个合适的font-size的值，这个值的取值为该父元素的高度除以1.14得到的值，并且子元素必须 是一个inline或inline-block元素，需要加上vertical-align:middle属性。
至于为什么是除以1.14而不是其他的数，还真没有人知道，你只需要记住1.14这个数就行了。
在方法5中说过在IE8+、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中，而这里的font-size的方法则适用于IE6和IE7，所以把这两种方法结合起来就能兼容所有浏览器了：
上面的例子中因为要居中的元素是一个块状元素，所以我们还需要把他变成行内元素，如果要居中的元素是图片等行内元素，则可以省略此步。
另外，如果 vertical-align:middle 是写在父居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。
注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。
先来说几种简单的、人畜无害的居中方法
把margin设为auto
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
使用 text-align:center
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
使用line-height让单行的文字垂直居中
把文字的line-height
🎜操作の効果: 🎜 🎜🎜垂直方向の中央揃えを実現するには font-size を使用します🎜🎜場合親要素の高さがわかっている場合、その内部の子要素を水平方向および垂直方向の中央に配置する場合は、このメソッドを使用できます。子要素の幅や高さはわかっている必要はありません。 🎜🎜この方法はIE6とIE7でのみ有効です。 🎜🎜このメソッドの重要な点は、親要素に適切な font-size 値を設定することです。この値の値は、親要素の高さを 1.14 で割った値になります。子要素は inline または inline-block 要素である必要があります。 vertical-align:middle 属性を使用して追加する必要があります。 🎜🎜なぜ他の数字ではなく 1.14 で割るのかについては、誰も知りません。1.14 という数字を覚えておくだけで十分です。 🎜🎜🎜
🎜🎜方法 5 で述べたように、IE8 以降、Firefox、Google などの現在のブラウザで使用できます。 code> display:table-cell は中央揃え用で、ここの font-size メソッドは IE6 と IE7 に適しているため、これら 2 つのメソッドを組み合わせることで、すべてのブラウザと互換性を持たせることができます。 :🎜🎜🎜
🎜🎜上記の例では、中央に配置する要素がブロック要素であるため、中央に配置する必要もあります。これはインラインになります。中央に配置する要素が画像などのインライン要素の場合、この手順は省略できます。 🎜🎜また、vertical-align:middle が親の中央に書かれている場合、これは CSS を使用してレイアウトするときによく遭遇する状況です。 CSS を使用してセンタリングを行う場合、1 つの属性でできる場合もありますが、すべてのブラウザと互換性を持たせるために特定のスキルが必要な場合もあります。この記事では、センタリングの一般的な方法をいくつか簡単に紹介します。 🎜🎜注: 特に指定がない限り、この記事で説明する方法は、IE6 以降、Google、Firefox などの主流のブラウザーと互換性があります。 🎜🎜まず、シンプルで無害な中央揃えの方法について説明します🎜🎜マージンを自動に設定します🎜🎜具体的には、要素の margin-left と margin を中央揃え -right に設定します。 code> は auto に設定されています。このメソッドは水平方向のセンタリングのみを実行でき、浮動要素または絶対配置要素には無効です。 🎜🎜text-align:center を使用してください🎜🎜これについては何も言うことはありません。画像、ボタン、テキストなどのインライン要素にのみ使用できます (display は inline)。 code> または <code>inline-block など) を水平方向の中央揃えに使用します。ただし、IE6 と 7 という 2 つの奇妙なブラウザでは、任意の要素を水平方向に中央揃えにすることができることに注意してください。 🎜🎜テキストの 1 行を垂直方向の中央に配置するには、line-height を使用します🎜🎜テキストの line-height をテキストの親コンテナの高さに設定します。これは、テキストが 1 行しかない状況に適しています。文章。 🎜🎜4. フォームを使用します🎜 テーブルを使用している場合は、td (場合によっては th) 要素の align="center" と を使用するだけで、さまざまなセンタリングの問題について心配する必要はありません。 >valign="middle" これら 2 つの属性は、内部のコンテンツの水平および垂直の中央揃えを完全に処理でき、テーブルはデフォルトで内部のコンテンツを垂直方向の中央に配置します。 css でテーブルの内容の中央揃えを制御したい場合は、垂直方向の中央揃えに vertical-align:middle を使用できます。水平方向の中央揃えについては、 で行うようです。 >css 対応する属性はありませんが、IE6 および 7 では、text-align:center を使用してテーブル内の要素を水平方向に中央揃えにすることができます。IE8 以降、Google、Firefox、その他のブラウザ text-align:center
align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效。
但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效，只能用表格自有的align属性。
使用display:table-cell来居中
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
那面所说的都是很基础的方法，自然不能称之为奇淫巧计，下面就来说一些需要使用一些技巧的居中方法。
使用绝对定位来进行居中
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
运行效果：
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top ,margin-top来实现垂直居中。
另一种使用绝对定位来居中的方法
此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。
下面用一段代码来了解这种方法：
运行效果：
这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。
使用浮动配合相对定位来进行水平居中
此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或right 设为50%
ie6 および 7 では、
css を渡すことができます。 text-algin は、コンテンツがインライン要素であるかブロック要素であるかに関係なく、テーブル コンテンツの水平方向の配置を制御します。 🎜🎜ただし、IE8+ と chrome や firefox などのブラウザの text-align:center は、ブロック要素に対しては無効です。テーブル独自の align のみを使用できます。コード＞プロパティ。 🎜display:table-cell を使用して中央揃え
🎜 テーブルではない要素については、次のようにdisplay:table-cell を使用してテーブルのセルとしてシミュレートできます。テーブルの便利なセンタリング機能を活用できます。例:ただし、この方法はIE8以降でのみ使用できます。 Google、Firefox等のブラウザでご利用の場合、IE6、IE7では無効となります。 🎜🎜そこで紹介されている方法はどれも非常に基本的なもので、派手なトリックとは言えません。ここでは、いくつかのスキルを必要とするセンタリング方法を紹介します。 🎜
中央揃えに絶対位置を使用する
🎜 この方法は、幅または高さがすでにわかっている要素に対してのみ機能します。 🎜🎜絶対配置の原則は、絶対配置要素のleft 属性または top 属性を 50% に設定することです。要素は中央に配置されていませんが、要素の幅または高さの半分だけ中央の位置から右または左にオフセットされているため、負の margin-left または margin を使用する必要があります。 - top の値は、要素を中央の位置に戻すために使用されます。負の margin 値は、要素の幅または高さの半分です。 運用効果:
🎜🎜センタリングのみを実現したい場合一方向の場合、水平方向の中央揃えを実現するには left と margin-left のみを使用し、top と margin-top を使用して垂直方向に中央揃えにします。 🎜<h2>絶対位置を使用してセンタリングする別の方法</h2>🎜この方法も、幅または高さがすでにわかっている要素にのみ適用され、残念ながら、IE9+、Google、Firefox などのみをサポートします。 w3c規格。 🎜🎜この方法を理解するには、以下のコードを使用してください:<br><img src="https://img.php.cn/upload/article/000/000/009/c5987c2a4a353965fc763fe1bf1fe6a3-7.png" alt=" "><br>運用上の影響:<br><img src="https://img.php.cn/upload/article/000/000/009/c5987c2a4a353965fc763fe1bf1fe6a3-8.png" alt="">🎜🎜ここで要素の幅と高さが定義されていない場合、その幅はleftとrightの値によって決まり、高さはtopの値によって決まります。したがって、要素の高さと幅を設定する必要があります。同時に、左、右、上、下の値を変更すると、要素を特定の方向にオフセットすることもできます。 🎜<h2>水平方向の中央揃えに相対位置の float を使用する</h2>🎜 このメソッドは、浮動要素を水平方向に中央揃えする方法の解決策でもあり、中央揃えする必要がある要素の幅を知る必要はありません。 🎜🎜フローティングセンタリングの原則は、フローティング要素を親要素の幅 <code>50% に対して相対的に配置することですが、この時点では要素はまだセンタリングされておらず、中心位置の半分です。 width の場合、内部の子要素は相対配置を使用して、それ自体の幅の余分な半分を戻す必要があります。また、相対配置はそれ自体に対して相対的に配置されるため、それ自体の幅の半分だけが必要です。left または right から 50% に変更するため、実際の幅を知る必要はありません。 🎜フローティングおよび中央への相対配置を使用するこの方法には、幅が常に変化する場合でも、中央に配置する要素の幅を知る必要がないという利点があります。欠点は、ラップするために追加の要素が必要になることです。中央に配置される要素。
コードを見てください:
操作の効果:
垂直方向の中央揃えを実現するには、font-size を使用します
親要素の高さがわかっていて、その中の子要素を水平方向と垂直方向の中央揃えにしたい場合は、この方法では、子要素の幅も高さも知る必要がなくなります。
この方法はIE6とIE7でのみ有効です。
このメソッドの重要な点は、親要素に適切な font-size 値を設定することです。この値の値は、親要素の高さを 1.14 で割った値になります。子要素は inline または inline-block 要素である必要があります。 vertical-align:middle 属性を使用して追加する必要があります。 font-size的值，这个值的取值为该父元素的高度除以1.14得到的值，并且子元素必须 是一个inline或inline-block元素，需要加上vertical-align:middle属性。
至于为什么是除以1.14而不是其他的数，还真没有人知道，你只需要记住1.14这个数就行了。
在方法5中说过在IE8+、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中，而这里的font-size的方法则适用于IE6和IE7，所以把这两种方法结合起来就能兼容所有浏览器了：
上面的例子中因为要居中的元素是一个块状元素，所以我们还需要把他变成行内元素，如果要居中的元素是图片等行内元素，则可以省略此步。
另外，如果 vertical-align:middle 是写在父元素中而不是子元素中，这样也是可以的，只不过计算font-size
方法 5 で述べたように、IE8 以降、Firefox、Google などの現在のブラウザで使用できます。 code> display:table-cell
を使用してセンタリングを実行し、ここでのfont-size メソッドは IE6 と IE7 に適しているため、これら 2 つのメソッドを組み合わせることですべてのブラウザと互換性を持たせることができます : 
上記の例では、中央に配置する要素がブロック要素であるため、中央に配置する必要もあります。インライン要素 中央に配置する要素が画像などのインライン要素の場合、この手順は省略できます。
また、子要素ではなく親要素にvertical-align:middleを書いていればこれも可能ですが、font-sizeを計算する際に使用されます> 1.14 の値は約 1.5 になるはずです。 上記は一般的なセンタリング方法です。抜けや誤りがある場合は修正してください。
以上がCSS を使用してさまざまなセンタリング方法を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。