当前位置:Web前端 > css> 正文

css垂直居中

时间:2015-4-25类别:Web前端

css垂直居中

css垂直居中

方式一、绝对定位

  •  
  •  
  • CSS 代码   复制
  • 
    
    .box4 span{
    
      width: 50%;  
    
      height: 50%;  
    
      background: #000;
    
      overflow: auto;  
    
      margin: auto;  
    
      position: absolute;  
    
      top: 0; left: 0; bottom: 0; right: 0;  
    
    }
    
    		
  •  

    方式二、table-cell

  •  
  •  
  • CSS 代码   复制
  • 
    
    .box1{
    
        display: table-cell;
    
        vertical-align: middle;
    
        text-align: center;         
    
    }
    
    				
  • 方式三、绝对定位和负边距

  •  
  •  
  • CSS 代码   复制
  • 
    .box3{position:relative;}
    .box3 span{
                position: absolute;
                width:100px;
                height: 50px;
                top:50%;
                left:50%;
                margin-left:-50px;
                margin-top:-25px;
                text-align: center;
            }
    
    		
  • 方式四、display:inline-block

  •  
  •  
  • CSS 代码   复制
  • 
    
    .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;
    
    }
    
    		
  • 方式五、line-height

    将line-height设置为与li的高度相同就可以居中

  •  
  •  
  • HTML 代码   复制
  • 
    <style type="text/css">
    .con_li{
    width:400px;
    height:300px;
    border:1px solid #777;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    background:red;
    color:#fff;
    line-height:300px;
    }
    </style>
    
    <li class="con_li">
    测试内容ddddddddddd
    </li>
    
    		
  • 方式六、CSS3中的Flexbox

  •  
  •  
  • CSS 代码   复制
  • 
    
    .box2{
    
        display: flex;
    
        justify-content:center;
    
        align-items:Center;
    
    }
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐