CSS实现元素水平垂直居中的几种方法
元素的居中效果是前端开发中经常用到的,比较经典的那个“水平垂直居中”效果,大家都知道,除此之外,有没有其他解决方案那!接下来那我们一起学习一下这些奇淫秘籍!
直接上代码:
/* 所有浏览器有效 */ .dialog{ width: 600px; height: 300px; position: absolute; left: 50%; top: 50%; margin-top: -150px;/* 高度的一半 */ margin-left: -300px;/* 宽度的一半 */ } /* IE8+以及其他高级浏览器有效 */ .dialog{ width: 600px; height: 300px; /* 如果不设置宽高(需要类似图片这种自身包含尺寸的元素) */ position: absolute; top: 0;left: 0;right: 0;bottom: 0; /* 必须是上下左右均0位置定位 */ margin: auto; /* 实现绝对定位元素的居中 */ } /* IE8+以及其他高级浏览器有效 */ .dialog{ width: 600px; height: 300px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); /* 50%为自身尺寸的一半 */ -ms-transform: translate(-50%,-50%); /* 50%为自身尺寸的一半 */ transform: translate(-50%,-50%); /* 50%为自身尺寸的一半 */ } |
嗨 Moocss! 博客志是一个用心推荐博客的部落格 受到路易大叔、龙轩、狸博窝、王商博客、龙霆工作室等众多博客的推荐。通过这是,相信会有更多的博友认识你~ 不知道你愿意给博客志投稿,介绍自己的博客吗?(推荐博客有惊喜哦) 如果不知道写点什么 能告诉我您的邮箱吗?我们来一个访谈怎么样?