ホームページ >ウェブフロントエンド >CSSチュートリアル >表示用のコード: 要素の垂直方向の中央揃えを実装する CSS の flex 属性

表示用のコード: 要素の垂直方向の中央揃えを実装する CSS の flex 属性

不言
不言オリジナル
2018-08-06 17:00:563001ブラウズ

この記事では、要素を垂直方向に中央揃えするためのコードを実装するための CSS の display: flex 属性を紹介します。必要な方は参考にしていただければ幸いです。

これまでは、絶対配置絶対または固定配置固定を使用していました

フレックスを使用して要素を垂直方向に中央揃えにする方法、親には子が含まれます

<div  class=&#39;itemBox&#39;>
    <div>boxboxboxboxboxboxboxboxboxboxbox</div>
</div>
 
.itemBox{
display: flex;
justify-content: center;
align-items: center;
background: #588cfe;
width: 100%;
height: 100vh;
}
.itemBox p{
background: #ffffff;
width: 200px;
height: 200px;
word-break: break-all;//英文超出盒子不换行问题
}

おすすめ関連記事:

CSS の text-transform 属性文字列変換のコード

CSSでテーブルを使用する2つの方法(例)

以上が表示用のコード: 要素の垂直方向の中央揃えを実装する CSS の flex 属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。