css水平垂直居中常用方法

最新推荐文章于 2024-08-28 22:07:19 发布

qq_43239820

最新推荐文章于 2024-08-28 22:07:19 发布

阅读量370

点赞数 2

分类专栏： css垂直居中部分文章标签： css水平垂直居中常用方法前端面试中经常问到的css水平垂直居中

本文链接：https://blog.csdn.net/qq_43239820/article/details/86530009

版权

css垂直居中部分专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

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