最新文章

点击排行

相关文章

当前位置:首页 > 网站制作
CSS移动端实现元素垂直居中
发表日期:2019-02-27 浏览量: 评论:

方法一:table-cell
 
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7就除外了。
 

<div class="box box1">
    <span></span>
</div>
 
.box1{    
    display: table-cell;    
    vertical-align: middle;    
    text-align: center;            
}

 
 注意 :此属性不能与 float:left 或是 position:absolute 一起使用。对margin值无反应,响应padding值。
 
 
方法二: display:flex
 
.box2{    
   display: flex;    
    justify-content:center;    
   align-items:center;
}

 方法三: translate
 

.box3 span{            
    position: absolute;            
    top:50%;            
    left:50%;            
    width:100%;            
    transform:translate(-50%,-50%);            
    text-align: center;        
}

通过translate来实现移位。
 
 
方法四:display:flex 和 margin:auto
 

.box4{    
    display: flex;    
    text-align: center;
}
 
.box4 span{
    margin: auto;
}

 
每一种办法都不难理解,而且在移动端兼容性没有问题。

来源:搬砖作者:网络

发表评论

验证码:

最新评论 共有条评论

OLEOU 2012-2019
返回顶部