私たちが馬を書いていたとき、おそらく水平方向と垂直方向のセンタリングの方法についてあまり知りませんでした。そこで、一般的に使用されるいくつかの水平方向および垂直方向の中央揃え方法の概要を説明します。
最初の方法 <!--html ボックス コード --><!-- 水平方向と垂直方向の中央揃え --><div class=Centered1> <p>最初のタイプ</p></div><!-css スタイル パーツ --> .Centered1{ 背景色: #800070; 幅: 100%; 高さ: 500px; .Centered1 p{ 幅: 200px; 200ピクセル; 行の高さ: 200ピクセル; 位置: 左: 0; マージン: 0; 2番目の方法 <!--html ボックス コード --><!-- 水平方向と垂直方向に中央揃え --><div class=Centered2> <p>dSecond type</p></div><!-css スタイル パーツ --> / *2 番目の方法は水平方向と垂直方向に中央揃えです*/ .Centered2{ 背景色: #ef8518; 位置: 相対; 200px; 高さ: 200px; 行の高さ: 200px; 左端: 50%; 3番目の方法 <!--html ボックス コード --><!-- 水平方向と垂直方向に中央揃え --><div class=Centered3> <p>d 3 番目のタイプ</p></div><!-css スタイル パーツ --> /*3 番目の方法は水平方向と垂直方向のセンタリングです*/ .Centered3{background-color:dimgrey;width:100%;position:relative; 200ピクセル; 高さ: 200ピクセル; テキスト整列: 左: 50%; 4番目の方法 <!--html ボックス コード--><!--水平方向と垂直方向の中央揃え--><div class=Centered4> <p>d 4 番目のタイプ</p></div><!-css スタイル パーツ--> /* 4 番目の方法は、水平方向と垂直方向の中央揃えです。古いバージョンの flex レイアウトです*/ .Centered4{ width: 100% height: 500px; -webkit-box-pack:center; .Centered4 p {幅: 200px; 行の高さ: 200px; 5番目の方法 <!--html ボックス コード --><!-- 水平方向と垂直方向の中央揃え --><div class=Centered5> <p>d 5 番目のタイプ</p></div><!-css スタイル パーツ --> /* 5 番目の方法は水平および垂直センタリングです。flex の新しいバージョンは水平および垂直センタリングです*/ .Centered5{ 背景色: darkslateblue; width: 100%; display: flex; ;整列アイテム: センター; } .Centered5 p { 幅: 200 ピクセル; 行の高さ: 200 ピクセル;以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。