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

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

不言
リリース: 2018-08-06 17:00:56
オリジナル
2989 人が閲覧しました

この記事では、要素を垂直方向に中央揃えするためのコードを実装するための 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート