css_html/css_WEB-ITnose で一般的に使用されるいくつかのセンタリング方法

フロントエンドのインタビューでは、ほとんどの人が div を中央に配置する方法を尋ねます:

文章がうまくないので、いくつかの文にまとめただけです。

でも、文章は間違いなく上達します。未来。

今日は、いくつかのメソッドについて詳しく説明します:

1. left、top、margin-left、および margin-top の属性を設定するには、position:absolute を使用します

 1 .one{ 2            position:absolute; 3            width:200px; 4            height:200px; 5            top:50%; 6            left:50%; 7            margin-top:-100px; 8            margin-left:-100px; 9            background:red; 10 }

このメソッドは、すべての基本的なブラウザと互換性がありますが、欠点は次のとおりです。幅と高さを固定する必要があるということです。

2、position:fixedを使用し、left、top、margin-left、margin-topの属性も設定します

 1 .two{ 2             position:fixed; 3             width:180px; 4             height:180px; 5             top:50%; 6             left:50%; 7             margin-top:-90px; 8             margin-left:-90px; 9             background:orange;10 }

誰もが知っているposition:fixed、IEはこの属性をサポートしていません

3、position:fixedを使用します属性、margin:auto を忘れてはなりません。

 1 .three{ 2             position:fixed; 3             width:160px; 4             height:160px; 5             top:0; 6             right:0; 7             bottom:0; 8             left:0; 9             margin:auto;10             background:pink;11 }

4、position:absolute 属性を使用して上/下/右/左を設定します

.four{            position:absolute;            width:140px;            height:140px;            top:0;            right:0;            bottom:0;            left:0;            margin:auto;            background:black;}

5、display:table-cell 属性を使用してコンテンツを垂直方向の中央に配置します

1 .five{2             display:table-cell;3             vertical-align:middle;4             text-align:center;5             width:120px;6             height:120px;7             background:purple;8 }

6、最も単純な方法 インライン要素を中央揃えにする方法、line-height 属性を使用します

1 .six{2             width:100px;3             height:100px;4             line-height:100px;5             text-align:center;6             background:gray;7  }

この方法は、テキストを垂直方向に中央に揃えるなど、非常に実用的です

7、css3 の display:-webkit-box 属性を使用します次に、 -webkit -box-pack:center/-webkit-box-align:center

1 .seven{2             width:90px;3             height:90px;4             display:-webkit-box;5             -webkit-box-pack:center;6             -webkit-box-align:center;7             background:yellow;8             color:black;9 }

8 を設定し、新しい CSS3 属性の translate:translate(x,y) 属性を使用します

 1 .eight{ 2             position:absolute; 3             width:80px; 4             height:80px; 5             top:50%; 6             left:50%; 7             transform:translate(-50%,-50%); 8             -webkit-transform:translate(-50%,-50%); 9             -moz-transform:translate(-50%,-50%);10             -ms-transform:translate(-50%,-50%);11             background:green;12 }

このメソッドは次のことを行います。固定値を設定する必要はありません。幅と高さはモバイル端末でより一般的に使用され、モバイル端末の CSS3 との互換性が高くなります。

9. 要素の前に次のメソッドを使用します。詳細な紹介: