四种常用方法 设置 不定/定宽高元素 在窗口/父元素中 水平垂直居中方法

一、定宽高元素在屏幕窗口水平垂直都居中，方法如下：Cd8胜于蓝|优秀个人博客

 Cd8胜于蓝|优秀个人博客

元素{
	position: fixed;
	left: 50%;
	top: 50%;
	/*负值+宽的一半+单位*/
	margin-left: -width/2+px;
	/*负值+高的一半+单位*/
	margin-top: -height/2+px;
}

 

二、不定宽高元素在屏幕窗口水平垂直都居中，方法如下：Cd8胜于蓝|优秀个人博客

 Cd8胜于蓝|优秀个人博客

元素{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

 

三、不定宽高元素在父元素中水平垂直都居中，方法如下：Cd8胜于蓝|优秀个人博客

    方案一：Cd8胜于蓝|优秀个人博客

 Cd8胜于蓝|优秀个人博客

父元素{
	position: relative;
}
子元素{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

 

    方法二：Cd8胜于蓝|优秀个人博客

 Cd8胜于蓝|优秀个人博客

父元素{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
/*注:display:table-cell;是将元素转化为表格单元格形式*/

 

四、定宽高元素在父元素中水平垂直都居中，方法如下：Cd8胜于蓝|优秀个人博客

 Cd8胜于蓝|优秀个人博客

父元素{
	position: relative;
}
子元素{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -width/2+px;
	margin-top: -height/2+px;

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
感谢您对胜于蓝个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/87.html

扫描关注胜于蓝微信公众号，第一时间获取网站模板更新动态

本文地址：/web/html/87.html

很赞哦！ ()