前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

移动端实现元素垂直居中

2017-10-17 16:01:11分类:HTML/CSS阅读(248)
方法一: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;
}
 
每一种办法都不难理解,而且在移动端兼容性没有问题。
原文链接:http://www.hqhtml.com/htmlcss/39.html,出自好切网(前端学堂),转载请注明出处。
标签:
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号