纯CSS3,无JS实现不定宽高水平垂直居中，最优方法。

最新推荐文章于 2024-05-07 22:17:41 发布

易刺猬

最新推荐文章于 2024-05-07 22:17:41 发布

阅读量1.2k

点赞数 2

文章标签： css3 web前端水平垂直居中不定宽高水平垂直居中

本文链接：https://blog.csdn.net/eeeecw/article/details/70992501

版权

方法一：通过transform实现不定宽高元素水平垂直居中

.example1{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	-webkit-transform:translate(-50%,-50%);
	border-radius: 6px;
	background: #fff;
}

方法二：通过flex布局实现不定宽高元素水平垂直居中

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

简单分析：

方法一；

先把元素设定为绝对定位，

然后通过 top 和 left 把元素的左上点移动到屏幕的中间，

最后通过 transform 属性，根据元素自身大小，相对向左和向上移动自身宽高的50%。

从而实现了不定宽高元素的水平垂直居中。

方法二：

设置父级元素 display 为 flex;

justify-content 设定子元素水平居中；

align-items 设定子元素垂直居中。

提醒，使用方法二时需要考虑浏览器兼容性，

对于PC端，一般chrome（测试版本：49.0.2623.110 m）和火狐（测试版本：49.0.2）都能很好地支持。ie不支持，显示的是顺序排列下来的宽度100%的模块。

对于移动端：
（1）上述代码iOS的原生safari浏览器是支持的；UC浏览器支持的很好；微信浏览器不支持（测试机型：苹果4s）

（2）安卓的原生浏览器不支持，能够正常显示模块，文档流依次排列；UC浏览器不支持，显示为空白；微信浏览器不支持

兼容浏览器写法：

.container{  
	display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
	display: -moz-box; /* Firefox 17- */  
	display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
	display: -moz-flex; /* Firefox 18+ */  
	display: -ms-flexbox; /* IE 10 */  
	display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  
}