实现 div水平、垂直居中的几种方法

转载： https://blog.csdn.net/Take_Dream_as_Horse/article/details/53908504

1、最常用的，也是最简单的(利用position定位、再用margin偏移)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>实现div水平垂直居中</title>
	<style type="text/css">
		body{
			background: #272822;
		}
		.test{
			position: absolute;
			top:50%;
			left:50%;
			width: 100px;
			height: 100px;
			margin:-50px 0 0 -50px;
			background: #27399a;
		}
	</style>
</head>
<body>
		<div class="test"></div>
</body>
</html>

2、父元素：relative。子元素：absolute。（此方法左右上下皆居中）

这个方式使用一个绝对定位且固定宽高的div，接着这个div被要求拉伸到top:0;bottom:0;，它因为高度被固定而做不到这一点，所以margin:auto;就让它居中了。这个方法类似于常见的使用margin:0 auto;来让块状元素水平居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/three-line.css" />
	<body>
		<div class="father">
			<div class="child">
			</div>
		</div>
	</body>
</html>

*{
	margin:0;
	padding:0;
}
.father{
	width:100%;
	height:200px;
	background-color: brown;
	position:relative;
	
}
.child{
	background-color: grey;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width: 300px;
	height:100px;
	margin:auto;
	
}

优点：
1、简单。
缺点：
1、不支持IE（但支持IE8 beta）。
2、空间不足的话内容会被截断，不会出现滚动条。

3.利用css3新增属性弹性盒子align-items和justify-content（会存在一些兼容性问题，没关系，以后肯定会兼容的）

这种方法还有一个好处：就算不给里层容器定义宽高，也会根据文本内容自动居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>实现div水平垂直居中</title>
	<style type="text/css">
		.bg{
			display: flex;
			width:500px;
			height: 500px;
			margin:0 auto;
			background: #272822;
			-webkit-align-items: center;
			align-items: center;
			justify-content: center;
		}
		.test{
			/*width: 100px;
			height: 100px;*/
			background: #27399a;
			color:#fff;
		}
	</style>
</head>
<body>
 
		<div class="bg">
			<div class="test">aaaaaaaaaaaaaa</div>
		</div>
		
</body>
</html>

4、这里扩充一下flex的盒子布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>实现div水平垂直居中</title>
	<style type="text/css">
		.bg{
			display: flex;
			width:500px;
			height: 500px;
			margin:0 auto;
			background: #272822;
			-webkit-align-items: center;
			align-items: center;
			justify-content: center;
		}
 
		.test{
			height: 100px;
			background: #27399a;
			margin-left: 10px;
		}
 
		.test:nth-child(1){
			flex:1;
		}
		.test:nth-child(2){
			flex:2;
			background: #a6e22e;
		}
		.test:nth-child(3){
			flex:1;
			background: #48beef;
			margin-right: 10px;
		}
		
 
	</style>
</head>
<body>
 
		<div class="bg">
			<div class="test"></div>
			<div class="test"></div>
			<div class="test"></div>
		</div>
		
</body>
</html>

实现 div水平、垂直居中的几种方法

猜你喜欢