您的位置:首页 > Web前端 > > 正文

css垂直居中16个方法(css实现元素垂直居中的常用方法总结)

更多 时间:2022-04-02 14:23:10 类别:Web前端 浏览量:2504

css垂直居中16个方法

css实现元素垂直居中的常用方法总结

 方法1:table-cell

html结构:

  • <li class="box box1">
            <span>垂直居中</span>
    </li>
    
  • css:

  • .box1{
        display: table-cell;
        vertical-align: middle;
        text-align: center;        
    }
    
  • css垂直居中16个方法(css实现元素垂直居中的常用方法总结)

    方法2:display:flex

  • .box2{
        display: flex;
        justify-content:center;
        align-items:Center;
    }
    
  • 方法3:绝对定位和负边距

  • .box3{position:relative;}
    .box3 span{
                position: absolute;
                width:100px;
                height: 50px;
                top:50%;
                left:50%;
                margin-left:-50px;
                margin-top:-25px;
                text-align: center;
            }
    
  • 方法4:绝对定位和0

  • .box4 span{
      width: 50%; 
      height: 50%; 
      background: #000;
      overflow: auto; 
      margin: auto; 
      position: absolute; 
      top: 0; left: 0; bottom: 0; right: 0; 
    }
    
  • 这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中,很神奇吧。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。

    方法5:translate
     

  • .box6 span{
                position: absolute;
                top:50%;
                left:50%;
                width:100%;
                transform:translate(-50%,-50%);
                text-align: center;
            }
    
  • 这实际上是方法3的变形,移位是通过translate来实现的。

    方法6:display:inline-block
     

  • .box7{
      text-align:center;
      font-size:0;
    }
    .box7 span{
      vertical-align:middle;
      display:inline-block;
      font-size:16px;
    }
    .box7:after{
      content:'';
      width:0;
      height:100%;
      display:inline-block;
      vertical-align:middle;
    }
    
  • 这种方法确实巧妙...通过:after来占位。

    方法7:display:flex和margin:auto
     

  • .box8{
        display: flex;
        text-align: center;
    }
    .box8 span{margin: auto;}
    
  • 方法8:display:-webkit-box

  • .box9{
        display: -webkit-box;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        -webkit-box-orient: vertical;
        text-align: center
    }
    
  • css3博大精深,可以实现很多创造性的效果,需要好好研究下。

    今天又发现一种方法,现在补上:

    方法9:display:-webkit-box

    这种方法,在 content 元素外插入一个 li。设置此 li height:50%; margin-bottom:-contentheight;。

    content 清除浮动,并显示在中间。

  • <li class="floater"></li>  
    <li class="content"> Content here </li>  
    
    .floater {
        float:left; 
        height:50%; 
        margin-bottom:-120px;
    }
    .content {
        clear:both; 
        height:240px; 
        position:relative;
    }
    
  • 优点:

    适用于所有浏览器
    没有足够空间时(例如:窗口缩小) content 不会被截断,滚动条出现 

    总结

    以上所述是小编给大家介绍的css实现元素垂直居中的常用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!

    您可能感兴趣