ホームページ >ウェブフロントエンド >htmlチュートリアル >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. 要素の前に次のメソッドを使用します。詳細な紹介: