cssでよく使われるいくつかの中心的な方法
13057 ワード
フロントエンドの面接では、divの中心的な方法を聞くことが多いです.
文章が下手なので,勝手にわずかな言葉で要約した.
しかし、これからは文章がもっとよくなります.
今日はいくつかの方法を詳しく数えてみましょう.
1 position:absoluteを使用して、left、top、margin-left、margin-topのプロパティを設定します.
この方法は基本的にブラウザと互換性があり,幅を固定する必要がある点が不十分である.
2 position:fixedを使用して、left、top、margin-left、margin-topのプロパティを同様に設定します.
皆さんご存知のposition:fixed,IEはこの属性をサポートしていません
3,position:fixed属性を利用して、margin:autoこれを忘れないでください.
4,position:absolute属性を利用してtop/bottom/right/leftを設定する
5,display:table-cellプロパティを使用してコンテンツを垂直に中央に配置
6、最も簡単な行内要素を中央に配置する方法で、line-height属性を使用します.
この方法は、文字を垂直に中央に位置合わせするなど、実用的です.
7,css 3のdisplay:-webkit-boxプロパティを使用して、-webkit-box-pack:center/-webkit-box-align:centerを再設定
8,css 3の新しい属性transform:translate(x,y)属性を使用
この方法は一定の幅を設定する必要がなく、移動端で使用することが多く、移動端でcss 3と互換性があるほうがよい.
9、最高大上の1種、使用:before要素
この方法は私の前の文章で詳しく紹介されています.http://www.cnblogs.com/White-Quality/p/4530867.html
文章が下手なので,勝手にわずかな言葉で要約した.
しかし、これからは文章がもっとよくなります.
今日はいくつかの方法を詳しく数えてみましょう.
1 position:absoluteを使用して、left、top、margin-left、margin-topのプロパティを設定します.
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属性を利用してtop/bottom/right/leftを設定する
.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,css 3の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,css 3の新しい属性transform: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 }
この方法は一定の幅を設定する必要がなく、移動端で使用することが多く、移動端でcss 3と互換性があるほうがよい.
9、最高大上の1種、使用:before要素
.nine{
position:fixed;
display:block;
top:0;
right:0;
bottom:0;
left:0;
text-align:center;
background:rgba(0,0,0,.5);
}
.nine:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.nine .content{
display:inline-block;
vertical-align:middle;
width:60px;
height:60px;
line-height:60px;
color:red;
background:yellow;
}
この方法は私の前の文章で詳しく紹介されています.http://www.cnblogs.com/White-Quality/p/4530867.html