CSSのセンタリング方法とは何ですか?

1.text-align:center;

上記のメソッドを使用して中央揃えにすることは、親コンテナ内の display:inline; のインライン要素またはテキストを水平方向に中央揃えにすることです。

2.inline-height: (高さ) 値;

inline-height を使用する場合、コンテンツを垂直方向に中央揃えするためによく使用されます。

3.margin :auto;

margin to centerを使用する場合、通常、要素が正確な幅の値を指定する場合、margin:auto; または margin: 0 auto; を設定すると、現在の要素が水平方向に中央に配置されます。

使用マージンを使用する場合、margin-left と margin-right の値を同じに設定することもでき、水平方向のセンタリングも実現できます

4. に従って設定します。上と左または下と右に要素を水平に、垂直方向に中央揃えにすることができます。ただし、親要素は高さを設定する必要があります

フレックスコンテナの flex-align:center;

align-items: center;

justify-cotent:center;

項目プロパティ align-self:center;

6. 負のマージン:

 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 } 
 6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 }

上記のコードで要素の水平方向と垂直方向のセンタリングを実現できます。

以上がCSSのセンタリング方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。