div を垂直方向に中央揃えにする 7 つの方法のまとめ

日常の Web 開発では、ページをより美しくし、より良いエクスペリエンスを提供するためにレイアウトに CSS と DIV を使用することがよくあります。では、さまざまな方法で div を垂直方向に表示する方法について詳しく説明します。 div をセンタリングします。

CSS で div の垂直方向の中央揃えを実現する方法:

1.CSS チュートリアル: div を垂直方向の中央揃えにする複数の方法

この質問に関しては、CSS について尋ねる人がいるかもしれません。垂直方向のセンタリングを設定するvertical-align属性はありませんか?一部のブラウザがサポートしていない場合でも、CSS Hack 技術を少し行うだけで済みます。ここで少し言っておきますが、CSS には確かにvertical-align 属性がありますが、これは (X)HTML 要素の valign 属性を持つ要素 (table 要素の

など) にのみ有効です。

、

などの要素には valign 属性がないため、vertical-align は機能しません。

2.CSSテキストとdivの垂直方向の中央揃え方法の例分析

スタイルレイアウトでは、要素を中央揃えする必要があることがよくあります。 CSS を使用して要素の水平方向の中央揃えを実現するのは比較的簡単です。テキストの場合は親要素に text-align: center を設定するだけでよく、p などのブロックレベルの要素の場合はマージン値を設定するだけです。左右のオートにします。要素の垂直方向の中央揃えを実現するために、CSS のvertical-align 属性を考える人もいるでしょうが、これは

、 、 などの valign 属性を持つ要素にのみ有効です。 table 要素、および

や のような要素には valign 属性がないため、vertical-align は機能しません。したがって、要素の垂直方向のセンタリングを実現するには、他の方法を使用する必要があります。以下に、一般的に使用されるいくつかの垂直方向のセンタリング方法をまとめました。

3.[フロントデスク] CSSはDIVの垂直方向のセンタリングを制御します

この時点で、ブラウザは画像内の緑色の点で示されている位置をデフォルトの実際の位置として使用するためです。コンテンツを中央に配置するには、margin-left と margin-top をそれぞれ負の半幅と半幅に設定します。

2. div の水平方向と垂直方向の中央揃え:

1.CSS を使用して div の水平方向と垂直方向の中央揃えを実現します

、この記事では主にそれらを紹介します。 Pure CSS は、 margin-top が -(height / 2)、margin-left が -(width / 2) である、 margin 付きの絶対値を使用します。もちろん、マージンを使用することはできません。つまり、上は calc(100% - 高さ) / 2、左は calc(100% - 幅) / 2 ですが、そうでない場合は calc() を使用しないことをお勧めします。それは必要ありません。

2.css で画面上の DIV の水平方向と垂直方向のセンタリングを実現する

css フルスクリーンで p の水平方向と垂直方向のセンタリングを実現する方法 この章では、p 要素の水平方向と垂直方向のセンタリングを実現する方法を紹介します。 Web ページ全体のコードが最も説得力があります。コードを見てください。

div の垂直方向の中央揃えに関する関連する質問と回答:

1.css3 - div のコンテンツを水平方向と垂直方向の中央揃えにするにはどうすればよいですか?

2. CSS - UC モバイルブラウザで div を水平方向と垂直方向に中央揃えにする方法は?

【div垂直方向センタリング関連記事】

1.css画像のセンタリング: CSS画像を上下左右にセンタリング(水平方向と垂直方向中央揃え)

2.div センタリング: div センタリング方法の最も包括的な要約

3.CSS センタリング: CSS センタリング方法の最も包括的なコレクション

以上がdiv を垂直方向に中央揃えにする 7 つの方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。