您现在的位置是：首页 > 网站制作 > CSS3|Html5CSS3|Html5

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

胜于蓝2019-07-30【CSS3|Html5】人已围观

简介一、定宽高元素在屏幕窗口水平垂直都居中，方法如下：元素{ position: fixed; left: 50%; top: 50%; /*负值+宽的一半+单位*/ margin-left: -width/2+px; /*负值+高的一半+单位

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

hfI胜于蓝|优秀个人博客

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

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

hfI胜于蓝|优秀个人博客

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

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

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

hfI胜于蓝|优秀个人博客

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

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

hfI胜于蓝|优秀个人博客

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

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

hfI胜于蓝|优秀个人博客

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

Tags：