元素页面水平垂直居中方法总结

页面布局经常遇到元素的居中问题，非常重要的点，不过有时有点怕怕的。最快的成长就是直面恐惧嘛，来一波清扫大总结。

定宽定高（要点 left:50%;margin-left: -元素w/2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.div-center{
				width: 100px;/*定宽定高*/
				height: 100px;
				line-height: 100px;
				background: pink;
				text-align: center;
				
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -50px;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		<div class="div-center">待居中元素</div>
	</body>
</html>

无宽高 (1.巧用transform 2.flex弹性盒子)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.div-center{
			    background: pink; /*巧用transform*/
			    text-align: center;
			    position: fixed;
			    top: 50%;
			    left: 50%;
			    transform: translateX(-50%) translateY(-50%);
			    -ms-transform: translateX(-50%) translateY(-50%);
			    -moz-transform: translateX(-50%) translateY(-50%);
			    -webkit-transform: translateX(-50%) translateY(-50%);
			    -o-transform: translateX(-50%) translateY(-50%);
			     z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="div-center">待居中元素</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.div-parent{
				position: fixed;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.4);
				display: flex;/*flex布局*/
				justify-content: center;/*子项目水平居中*/
				align-items: center;/*子项目垂直居中*/
			}
			.div-center{
				padding: 20px;
				background: pink;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="div-parent">
			<div class="div-center">待居中元素</div>
		</div>
	</body>
</html>

薛定谔的喵喵喵

发布了35 篇原创文章 · 获赞 11 · 访问量 3万+

私信关注

元素页面水平垂直居中方法总结

猜你喜欢