尚武科技——负责任的企业公民

电话

电话咨询

pHONE CONSulTING

0311-83796180

QQ

在线咨询

ONliNE CONSulTING
百度商桥
科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告

尚武科技春节放假公告    2024-02-03

尚武科技服务热线:0311-
 83796180
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
CSS3让元素居中的四种方法

  我是石家庄做网站的一名前端工程师,今天我给大家分享的是css中让元素居中的四种方法。希望这篇文章对大家能有所帮助。

  第一种方法:

  div.box{

  weight:200px;

  height:400px;

  position:absolute;

  left:50%;

  top:50%;

  margin-left:-100px;

  margin-top:-200px;

  }

  有点是兼容性好;缺点是必须知道元素的宽高

  -------------

  第二种方法:

  div.box{

  weight:200px;

  height:400px;

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%,-50%);

  }

  不用知道元素的宽高;缺点是兼容性不好,只支持IE9+的浏览器

  ---------------

  第三种方法

  div.box{

  weight:200px;

  height:400px;

  position:absolute;

  left:0;

  right:0;

  top:0;

  bottom:0;

  margin:auto;

  }

  优点是兼容性较好,缺点是不支持IE7以下的浏览器

  ---------------

  第四种方法

  div{

  display:flex;

  justify -content:center;

  align-items:center;

  }

  以上就是石家庄做网站的尚武科技π为大家分享的CSS3让元素居中的四种方法

  希望对各位小伙伴有所帮助。

  如果大家对有什么技术方面的问题,可以关注石家庄做网站的尚武科技官方公众号“尚武科技π”,其中会有大量关于”互联网+”的相关的内容供大家互相学习了解,同时欢迎大家一起讨论技术问题。

  通过以上内容的说明,大家对CSS3让元素居中的四种方法已经有了一定的了解。如果大家还有什么问题可以在尚武科技π留言,我们会在下期的文章更新中为您解答您的问题。

  希望石家庄做网站的尚武科技做网站做的越来越好。

  如果大家觉得尚武科技π写的文章对大家有用的话别忘了分享给朋友,万分感谢大家对尚武科技π的支持。

  码字不易,且看且珍惜......




上一篇:动态网站设计你了解吗?             下一篇:网页设计工作流程(一)

标签:石家庄做网站
尚武科技
推荐阅读
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
值班电话:15512183667
在线服务: 尚武科技售前专员   
合作答疑 |  企业邮箱 |  关于我们 |  联系我们 |  版权声明 |  会员中心 |  友情链接 |  免责声明
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved