web-dev-qa-db-ja.com

CSS flexbox垂直/水平方向の中央の画像、親の高さを明示的に定義せずに

onlyでは、親divおよび子img要素が以下に示すように、どのように垂直にandimg要素の水平方向の中央揃え明示的ではない親のheightの定義div？

<div class="do_not_define_height">
 <img alt="No, he'll be an engineer." src="theknack.png" />
</div>

私はflexboxにあまり馴染みがないので、flexbox自体が全高を埋めても大丈夫ですが、他の無関係なプロパティはありません。

cssflexbox
44
John

heightを明示的に定義せずに、親にflex値を適用する必要があると判断しましたand grandparent div elements ...

<div style="display: flex;">
<div style="display: flex;">
 <img alt="No, he'll be an engineer." src="theknack.png" style="margin: auto;" />
</div>
</div>

単一の親要素を使用している場合は、次を使用します。

align-items: center;
display: flex;
justify-content: center;
19
John

次のルールを親要素に追加するだけです。

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

これはサンプルデモ（ウィンドウのサイズを変更して、画像が整列するようにする）

ブラウザのサポート for Flexbox最近では非常に優れています。

display: flexおよびalign-itemsのブラウザ間の互換性のために、古いflexbox構文も追加できます。

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
90
Danield