css水平垂直居中常用方法

css水平垂直居中在当前网页制作中可以说是非常重要了,大公司面试的时候也经常会问到这种问题,还要你给出多种方法,说出哪一种办法最好并且兼容性还要好,我给大家总结了几种水平垂直居中的方法。

第一种:

元素的水平居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.div1{
			width: 200px;
			height: 200px;
			background-color: blue;
			margin: 0 auto;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color:red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2"></div>
</div>
</body>
</html>

效果如图:
margin 0 auto;
这样就是利用的margin:0 auto;实现的元素的居中,但是有一个缺点就是你需要给他设置宽度才可以, 而且还只能是块级元素,内联元素和内联块元素都是不可以的

第二种

元素的水平垂直居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.div1{
			width: 200px;
			height: 200px;
			background-color: blue;
			margin: 0 auto;
			position: relative;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color:red;
			position: absolute;
			left:50%;
			top:50%;
			margin-left:-50px;
			margin-top:-50px;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2"></div>
</div>
</body>
</html>

效果如图:
在这里插入图片描述
这个方法关键的地方是
父元素设置为:position: relative;
子元素设置为:position: absolute;
距上50%,据左50%,然后减去元素自身宽度的距离就可以实现
但是缺点还是需要知道宽度值和高度值

第三种

元素的水平垂直居中
这个方法和第二种方法很相像,关键点在于transform: translate(-50%, -50%);

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.div1{
			width: 200px;
			height: 200px;
			background-color: blue;
			margin: 0 auto;
			position: relative;
		}
		.div2{
			background-color:red;
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2">哈哈哈</div>
</div>
</body>
</html>

这个方法真得是非常好,不需要知道元素的宽度值或者高度值就可以实现水平垂直居中,这是css3中的知识,和第二种原理很像。
效果如图:
在这里插入图片描述

第四种

position:absolute绝对定位实现水平垂直居中
话不多说直接上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.div1{
			width: 300px;
			height: 300px;
			background-color: blue;
			position: relative;
		}
		.div2{
			background-color:red;
			width: 100px;
			height: 100px;
			position: absolute;
			top:0;
			left:0;
			bottom: 0;
			right: 0;
			margin: auto;

		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2">我居中了哈</div>
</div>
</body>
</html>

效果如图:
在这里插入图片描述

第五种

flex布局中实现水平垂直居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.div1{
			width: 300px;
			height: 300px;
			background-color: blue;
			display: flex;/*flex布局*/
	        justify-content: center; /*水平居中*/ 
	        align-items: center;  /*垂直居中*/
		}
		.div2{
			background-color:red;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2">我居中了</div>
</div>
</body>
</html>

效果如图:
在这里插入图片描述
需要注意的是:
display: flex;
justify-content: center;
align-items: center;
这些需要给父级添加

第六种

inline-block实现水平居中方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.div1{
			width: 300px;
			height: 300px;
			background-color: blue;
			text-align: center;
		}
		.div2{
			background-color:red;
			width: 100px;
			height: 100px;
			display: inline-block;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2">棒棒哒</div>
</div>
</body>
</html>

效果如图:
在这里插入图片描述
这个地方的关键在于给子级设置display:inline-block;让他变成一个内联块,然后给父级设置text-align: center;就可以实现水平居中
不过这个东西是有缺点的,缺点在于使用inline-block的元素之间会存在空白间距,这个是在ul搭配li给li设置display:inline-block;出现的问题比较多
所以说这个方法要灵活使用

第七种

display:box的水平居中和垂直居中显示

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.div1{
			width: 300px;
			height: 300px;
			background-color: blue;
			 display: box;
			display: -webkit-box;
			-webkit-box-pack:center; /*实现水平居中*/
			-webkit-box-align:center; /*实现垂直居中*/

		}
		.div2{
			background-color:red;
			width: 100px;
			height: 100px;
			display: inline-block;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2">棒棒哒</div>
</div>
</body>
</html>

效果如图:
在这里插入图片描述

上面总共为大家整理了七种实现水平居中或者水平垂直居中比较常用的方法,希望对大家有所帮助。如果您有更好的建议,希望能与我们一起分享。

1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 、4下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合;、下载 4使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合;、 4下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.m或d论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 、1资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值