专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-01浏览:909分类:CSS

一、定宽高元素在屏幕窗口水平垂直都居中,方法如下:

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


二、不定宽高元素在屏幕窗口水平垂直都居中,方法如下(此方法需要满足自身包含尺寸的元素,例如图片等):

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


三、不定宽高元素在父元素中水平垂直都居中,方法如下:

    方案一:

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


    方法二:

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


四、定宽高元素在父元素中水平垂直都居中,方法如下:

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


手机扫码访问

已有1位网友发表了看法:

  • 一只菜鸟

    一只菜鸟  评论于 [2021-04-21 14:59:05]  回复

    除了第一种外,其他三种都是有问题的,需要满足一定的条件

取消回复欢迎 发表评论:

关灯

前端微信百人大群×