居中的几种方法

2018-06-24 01:58:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一:通过margin负值

.one{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -100px;}

兼容性好,但是必须要定宽高

二:通过margin:auto

.two{ position: absolute; width: 200px; height:200px; margin: auto 0;}

以上两种方法都可以把absolute换成fixed,注意,fixed在ie下不支持

三:行内元素居中

.three{ width: 100px; height: 100px; line-height: 100px; text-align: center;}

这种方法只能居中行内元素。常用于文字对其居中

四:transform居中

.four{ position: absolute; top: 50%; height: 50%; transform: translate(-50%, -50%);}

存在css3浏览器兼容问题

五:flex布局

.five{ display: flex; align-items: center; justify-content: center;}

存在css3浏览器兼容问题

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【前端】自适应布局方法总结

下一篇:CSS/CSS3中的原生变量var详解以及布局响应式网页扩展