1:使用position:absolute,设置left、top、margin-left、margin-top的属性
position:absolute; width:200px; height:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:red;
2:使用position:fixed,同样设置left、top、margin-left、margin-top的属性
position:fixed; width:180px; height:180px; top:50%; left:50%; margin-top:-90px; margin-left:-90px; background:orange;
3:利用position:fixed属性,margin:auto这个必须不要忘记了。
position:fixed; width:160px; height:160px; top:0; right:0; bottom:0; left:0; margin:auto; background:pink;
4:利用position:absolute属性,设置top/bottom/right/left
position:absolute; width:140px; height:140px; top:0; right:0; bottom:0; left:0; margin:auto; background:black;5,利用display:table-cell属性使内容垂直居中
display:table-cell; vertical-align:middle; text-align:center; width:120px; height:120px; background:purple;6最简单的一种使行内元素居中的方法,使用line-height属性
width:100px; height:100px; line-height:100px; text-align:center; background:gray;
时间: 2024-10-30 19:49:26