搜索
查看: 180|回复: 0

作为前端程序猿,一定得知道前端居中方法

[复制链接]
发表于 2018-5-14 12:37:24 | 显示全部楼层 |阅读模式
在做前端开发的同学知道,在开发html页面的时候经常会需要用到元素居中显示。但对于一些前端开发的菜鸟(初来乍到)来说这可能哟偶时候有点头疼.......
1,负外边距居中
外边距相信大家都知道无非就是margin属性对吧!所以负外边距则是吧margin的值为负值,下面是实例代码:
但是大家要注意,这种负外边距居中的方法,首先元素的有固定的width和height,其次元素必须具有position属性并且元素的margin-top:-height,margin-left:-width也就是元素宽高的负的一半
2,绝对定位居中
此方法就是使用元素的position属性,但是也需要指定元素的宽和高,并且元素的margin:auto才行,还有一点就是position属性的四个值=0,不过这个方法不常用。
3,第三种方法,是使用css3的transform动画属性
transform居中方法,不用指定具体width,height;2,使用transform属性进行居中定位
4,最后的一种方法是目前比较常用的方法就是使用flex实现
在这里顺便说一下,移动端页面布局目前用的比较多的就是flex布局实现,所以建议大家都去了解一下flex布局。
上面提到的元素居中方法都存在一定的浏览器兼容问题,特别是后两者,不过那大多数时出现在较老版本的浏览器中,比如ie6,7,8..最新版的chrome,safari,firfox都是可以正常支持的,大家可以放心使用。





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

菜鸟论坛

菜鸟论坛-致力于个人网站发展的草根站长联盟,为广大从事互联网工作、前端开发、个人站长、网站搭建、SEO优化、网络运营以及其他领域的个人草根站长同学提供一个免费公益性的信息交流与资源分享的站长平台。

微信公众号

联系我们

  • 广告合作
  • QQ:542750839

QQ|手机版|小黑屋|菜鸟论坛 ( 鲁ICP备17013748号 )|网站地图

Powered by Discuz! X3.4 © 2018 MZHENG.CN

快速回复 返回顶部 返回列表