CSS水平垂直居中的方法

第一种： 绝对定位，在不确定div的宽高的情况下，使用transform:translate(-50%,-50%);

translate(x,y)，第一个值表示x轴上的移动，第二个值表示y轴上的移动。
取正值表示向右和向下移动；取负值表示向左和向上移动。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.child{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(pink,skyblue);
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child">
				
			</div>
		</div>
	</body>
</html>

运行效果：

第二种： 绝对定位，在确定div的宽的情况下使用，margin值为当前div宽度的一半的负值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.child{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(pink,skyblue);
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -100px 0 0 -100px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child">
				
			</div>
		</div>
	</body>
</html>

运行效果：

第三种： margin:auto ，四个值（top,left,right,bottom）都设为0,margin设为auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.child{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(pink,skyblue);
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child">
				
			</div>
		</div>
	</body>
</html>

运行效果：

第四种： 弹性盒布局，display设为flex(在父级元素上设置)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				height: 400px;
				width: 400px;
				background-color: #D5A4CF;
                /*弹性盒布局*/
				display: flex;
				/* 子元素水平对齐方式 */
				justify-content: center;
				/* 子元素垂直对齐方式 */
				align-items: center;
			}
			.child{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(pink,skyblue);
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child">
				
			</div>
		</div>
	</body>
</html>

运行效果：

第五种：表格法 tabel-cell 会受到float和position的影响，应尽量避免一起使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(pink,skyblue);
				display: table-cell;
				/* 子元素垂直居中对齐 */
				vertical-align: middle;
			}
			.child{
				width: 100px;
				height: 100px;
				background-color: #D5A4CF;
				/* 水平居中对齐*/
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child">
				
			</div>
		</div>
	</body>
</html>

运行效果：

CSS水平垂直居中的方法

猜你喜欢