ブロックレベル要素は、水平方向中央に配置され、いくつかの方法がありますか?彼らは何ですか?

センター水平:要素を選択するセレクタ、

     1. [属性の追加マージン:自動;

     2.親要素、子要素の相対位置position: absolute;left:50% 、同じマージン左値- (サブ要素の半値幅)は、のように設定値、また、所望の中心上方に移動カセットの半分の左上部に対するケースであります程度の幅を達成することができます。

     ディスプレイ3.親要素:フレックス;正当化-contet:センター;

垂直方向の中央:ディスプレイへの親要素:フレックス; aiign-アイテム:センター;

     2.親要素、子要素の相対的な位置position: absolute;top: 50%;マージントップである一方- (子要素の高さの半分)、トップ値は、だけでなく、ボックスの高さの中央半分を上に移動したいときには、ボックスの上部に関して提供されているため、達成することができます。

     3.この方法では、親コンテナに配置され、第一と同様であるdisplay:flex;子要素セットalign-self: center;

     4.親コンテナプラス子要素では、ボックスの高さの半分の高さを除去した後、実際には、隠された要素ブロックを設定し、ブロック要素は、実際には垂直方向の中央に「スクイーズ」を表示場所;

     これは、水平方向+垂直中心ブロック要素を可能にし、自動:5セット親要素は、サブ要素、底の上部セットは、正しい値が0、最後に設定されたマージンでの左しつつ、絶対位置決めされるサブ素子の反対側に配置されています

     6.親コンテナを設定しますdisplay: table-cell;vertical-align: middle;

おすすめ

転載: www.cnblogs.com/hudingbiao/p/12078156.html