css

关于 DESTOON B2B系统 的功能二次开发、前端模板制作HTML、JS、css特效教程、图片素材等这里应有尽有,如您需要,正好我们这里有。

CSS移动端实现元素垂直居中

   css     2019-05-16 17:09     www.dtmuban.com     小黑     93     0    
核心提示:方法一:table-celldisplay: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


方法一: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;
}


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

--结束END--

有问题投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

本文标题: CSS移动端实现元素垂直居中

本文链接: https://www.dtmuban.com/course/655.html (转载时请保留)

阅读更多
 
本文标签: 手机 移动 居中
0

圈友点评

文明上网理性发言,请遵守 新闻评论服务协议

福利

免费
福利

购买模板,免费送VIP

代授权

程序
授权

小黑

联系
客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

售前咨询 售后服务 DT授权代办

工作时间:

周一至周五: 09:00 - 18:00

反馈

用户
反馈