CSS实现元素水平垂直居中的几种方法

元素的居中效果是前端开发中经常用到的,比较经典的那个“水平垂直居中”效果,大家都知道,除此之外,有没有其他解决方案那!接下来那我们一起学习一下这些奇淫秘籍!

Absolute Horizontal And Vertical Centering In 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%为自身尺寸的一半 */
}

参考资料:Absolute Horizontal And Vertical Centering In CSS

站点统计