CSS の垂直方向と水平方向のセンタリング_html/css_WEB-ITnose

簡単な要約: インライン要素を水平方向に中央揃えにするには、 text-align: center; を使用し、ブロックレベルの要素を水平方向に中央揃えにするには、 margin-left: auto; margin-right: auto; を使用します。

間違いなく、これは最も単純なケースです。

HTML 構造は次のとおりです:

1 <div class="demo">2     <span>111111111111111111111111111111111111</span>3 </div>

高さは固定されていません (この方法は複数行のテキストにも適用でき、以下では説明しません)

1 .demo {2     text-align: center; 3     padding-top: 20px;4     padding-bottom: 20px;5 }

高さ固定

1 .demo {2     text-align: center;3     height: 100px;4     line-height: 100px;5 }

次に、複数の行がある場合の状況について説明します。

HTML 構造は次のとおりです:

1 <div class="demo">2     <span>111111111111111111111111111111111111<br />22222222222222222222</span>3 </div>

高さが固定されていない場合は、パディング値を追加するだけでよく、これ以上の説明は必要ありません。

高さが固定の場合

方法1：親要素にdisplay:tableを設定し、子要素にdisplay:table-cellを設定します。テーブルの機能を上手に活用しましょう。

 1 .demo { 2     height: 100px; 3     display: table; 4     margin-left: auto; 5     margin-right: auto; 6 } 7 .demo span { 8     display: table-cell; 9     vertical-align: middle;10 }

方法 2: 親要素をposition:relativeに設定し、子要素をposition:absoluteに設定します。これは主に、translate の中心が要素自体に対して相対的であるという事実を利用します。

 1 .demo { 2   position: relative; 3   height: 100px; 4 } 5  6 .demo span { 7   position: absolute; 8   left: 50%; 9   top: 50%;10   -webkit-transform: translate(-50%, -50%);11       -ms-transform: translate(-50%, -50%);12           transform: translate(-50%, -50%);13 }

方法 3: フレックス レイアウトを使用します。

.demo {  height: 100px;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;  -webkit-justify-content: center;      -ms-flex-pack: center;          justify-content: center;  -webkit-box-align: center;  -webkit-align-items: center;      -ms-flex-align: center;          align-items: center;}

方法 4: :after、:before 疑似クラスを使用し、インライン ブロックの機能を組み合わせて垂直方向のセンタリングを実現します。

えー

今のところ思いつくのはこれだけです。