フロントを水平および垂直にセンタリングする方法

初中学校:  ライティングモード

あなたは参照することができます:https://www.runoob.com/cssref/css-pr-writing-mode.html

このメソッドはもう少し複雑です。書き込みモードはテキストの表示方向を変更できます


2番目のタイプ:  テーブルフォーム

テーブルセルの形式で設定

利点:  テーブルセルのコンテンツは垂直方向に中央揃えされます。水平方向の中央揃え属性を追加するだけです。

短所:  これは表の正しい方法ではないため、あまりお勧めしませんが、達成できます


3番目のタイプ:  テーブルセルは水平および垂直のセンタリングを実現します:テーブルセルの中央のセンターの組み合わせ使用

直接親に設定する

  display: table-cell;
  vertical-align: middle;
  text-align: center;
  •  
  • わかりやすくするために、幅、高さ、境界線を設定できます
   width: 240px;
   height: 180px;
   border:1px solid #666;

4番目:  フレキシブルボックス法

justify-content:centerを設定することにより、

align-items:center;それだけです

利点:  モバイル端末は柔軟性があり、無料で使用できます

欠点:  PC端末は互換性に従って判断する必要があります


5番目のタイプ:  グリッド(グリッドレイアウト)

Set display:grid; for the parent

align-self:center; justify-self:center;子要素の設定

利点:  コードが少ない

短所:  フレックスほど互換性がないため、フレックスをお勧めします

目次

最初の中学校:ライティングモード

2番目のタイプ:テーブルフォーム

3番目のタイプ:テーブルセルは水平および垂直のセンタリングを実現します:テーブルセルの中央のセンターの組み合わせ使用

4番目:フレキシブルボックス法

5番目のタイプ:グリッド(グリッドレイアウト)


おすすめ

転載: blog.csdn.net/weixin_46729085/article/details/108600888