zb0916

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;

分类:

技术点:

相关文章:

  • 2021-12-31
  • 2021-12-19
  • 2021-12-15
  • 2021-12-31
  • 2021-12-12
  • 2021-12-14
  • 2021-12-15
  • 2021-12-01
猜你喜欢
  • 2021-12-19
  • 2021-12-20
  • 2021-12-31
  • 2021-09-28
  • 2021-10-26
  • 2021-12-04
相关资源
相似解决方案