CSS实现水平垂直居中的六种方式

最新推荐文章于 2024-06-25 06:17:50 发布

Villero

最新推荐文章于 2024-06-25 06:17:50 发布

阅读量185

点赞数

分类专栏：前端文章标签： html flex css 面试 css3

本文链接：https://blog.csdn.net/qq_41580831/article/details/105316800

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近面试经常被问到：怎么实现水平垂直居中。特此总结一下
上代码以供参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 1. 负外边距+absolute 需要知道居中元素宽高*/
			/* .parent {
				width: 300px;
				height: 300px;
				background-color: #FF0000;
				position: relative;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
				position: absolute;
				left: 50%;
				margin: -50px 0 0 -50px;
				top: 50%;
			} */
			
			/* 2. margin auto+absolute 不需要知晓子元素宽高*/
			/* .parent {
				width: 300px;
				height: 300px;
				background-color: #FF0000;
				position: relative;
				
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			} */
			
			/* 3. calc计算属性，原理同法1 兼容性依赖于calc，且需要知道居中元素宽高， */
			/*
			.parent {
				width: 300px;
				height: 300px;
				background-color: #FF0000;
				position: relative;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
				position: absolute;
				top: calc(50%-50px);
				left: calc(50%-50px);
				top: -webkit-calc(50%-50px);
				left: -webkit-calc(50%-50px);
				top: -moz-calc(50%-50px);
				left: -moz-calc(50%-50px);
			}
			*/
			
			/* 4. transform+absolute 原理同法1 兼容性依赖于transform2d*/
			/* .parent {
				width: 300px;
				height: 300px;
				background-color: #FF0000;
				position: relative;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			} */
			
			/* 5. flex布局  多用于移动端*/
			/* .parent {
				width: 300px;
				height: 300px;
				background-color: #FF0000;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
			} */
			
			/* 6. grid网格布局 类似flex布局，但兼容性不好*/
			.parent {
				width: 300px;
				height: 300px;
				background-color: #FF0000;
				display: grid;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
				align-self: center;
				justify-self: center;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son"></div>
		</div>
	</body>
</html>