私たちが苦労したセンタリングを覚えていますか? _html/css_WEB-ITnose

div でコンテンツをセンタリングする問題は古いトピックですが、最近、多くのフロントエンド開発者が依然としてそれを実現する方法を尋ねていることに気付きました。実際、インターネット上にはすでに多くの情報や事例が存在します。ここでは、さらに一般的な対処方法をいくつかまとめます。

ケース 1: div の高さ制限、コンテンツの長さは 1 行に制限されます

1 .v-align {2     margin: 0 auto;3     width: 200px;4     height: 80px;5     text-align: center;6     line-height: 80px;7     border: 1px solid #ddd;8 }

1 <div class="v-align">我的内容只能有一行。</div>

ケース 2: div の高さ制限、コンテンツは制限されません

 1 .v-mult { 2     margin: 0 auto; 3     width: 200px; 4     height: 100px; 5     border: 1px solid #ddd; 6     overflow: hidden; 7 } 8 .v-mult .empty, 9 .v-mult .text {10     display: inline-block;11     *display: inline;12     *zoom: 1;13     vertical-align: middle;14 }15 .v-mult .empty {16     height: 100%;17 }

1 <div class="v-mult">2     <span class="empty"></span>3     <span class="text">我的内容不限，多高都行<br>换行照常</span>4 </div>

シナリオ 3: divの高さは可変です コンテンツ高さ一定

 1 .v-auto { 2     position: relative; 3     margin: 0 auto; 4     width: 200px; 5     border: 1px solid #ddd; 6 } 7 .v-auto .text { 8     position: absolute; 9     top: 50%;10     margin-top: -50px;11     height: 100px;12     border: 1px dashed #ddd;13 }

1 <div class="v-auto">2     <div class="text">3         我的高度是固定的，只有100px高，但是我的父及高度不定，我怎么垂直居中呢？4     </div>5     <br><br><br><br><br><br><br><br>6 </div>

状況形四：div高さ不定，コンテンツ高不定

 1 .v-auto-out { 2     position: relative; 3     margin: 0 auto; 4     width: 200px; 5     border: 1px solid #ddd; 6 } 7 .v-auto-out .auto-in { 8     position: absolute; 9     top: 50%;10     border: 1px dashed #ddd;11     /* 这里有兼容性问题 */12     -webkit-transform: translateY(-50%);13     -ms-transform: translateY(-50%);14     -o-transform: translateY(-50%);15     transform: translateY(-50%);16 }

1 <div class="v-auto-out">2     <div class="auto-in">我的高度不定，我的父及高度也不定，这下要上下居中，该如何是好？我们一起来瞧瞧吧。</div>3     <br><br><br><br><br><br><br><br><br>4 </div>

好了，知道この四種の方法、私は相信足以应对日常作業におけるさまざまな垂直方向のセンタリングの問題。コードは非常にシンプルなので、これ以上詳しく説明する必要はありません。一言で言えば、CSS のさまざまな属性スタイルは、人間の体のさまざまな器官に似ており、各器官の機能を理解することでのみ、相互に連携してさまざまなタスクを実行できます。逆に、個人の能力には限界があります。

著者のブログ: http://www.seejs.com