質問したら戸惑いました (1) 垂直中心化_html/css_WEB-ITnose

最近、インタビューをしたり、他人にインタビューしたり、他人にインタビューされたりすることが多いので、それをまとめて、聞くだけで混乱するシリーズを書いていきます。 。

子 div を垂直方向に中央揃えにする方法は? これはよくある質問です。本題に直接進みますが、実際にはいくつかのオプションがあります:

1. パディング/マージン

これは最も一般的な解決策です。たとえば、外側の div パッケージの高さは 30 ピクセルに固定されます。内部 div の高さが 10px に固定されている場合、中央揃えの解決策は非常に簡単で、内部 div のパディング/マージンを設定するだけです。

コードは次のとおりです。

    .inner-div {        padding(margin)： (( 外层高度 - 内层高度 ) / 2) 0;    }

2. 絶対位置決め

おそらく、垂直方向のセンタリングに絶対位置決めを使用することが最も一般的に使用されます。子要素は親要素に対して 50% 移動しますが、絶対配置の座標原点は左上隅であるため、要素が正確に中央に配置されるように、子要素を要素の幅の半分だけ修正する必要があります。 🎜>

コードは次のとおりです (子要素の幅が 200px であると仮定します):

    .inner-div {        position: absolate;        top: 50%;        margin-top: -100px;    }

上記の方法は従来の方法です。さらに深く掘り下げると、どうすればよいでしょうか。子要素の高さがわからない場合はどうすればよいでしょうか?結局のところ、要素の幅を直接知ることができない場合が多くあります。

そのため、CSS3 のいくつかのプロパティを使用する必要がある次の高度なソリューションがあります。

具体的な方法は次のとおりです。 >

3. 究極の解決策

    .inner-div {        position: absolate;        top: 50%;        /*利用css3的属性，进行移动,就不需要知道元素具体高度了*/        transform： translateY(-50%);    }

問題を解決するには、ここをクリックしてください。互換性の問題により、コードにはプレフィックスを追加する必要があります。

一般に、上記のコードを子要素に追加すると、すぐに有効になります。問題がある場合は、それを外側のレイヤーに配置してみてください。 P

要約すると、次のようになります。これらは私が学んだ一般的に使用される垂直方向のセンタリング方法です。他の方法がある場合は、教えていただければ幸いです。ありがとうございます。

    display: -webkit-box;    -webkit-box-pack: center;    -webkit-box-align: center;    display: -moz-box;    -moz-box-pack: center;    -moz-box-align: center;         display: -ms-flexbox;    -ms-flex-pack: center;    -ms-flex-align: center;