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

最新推荐文章于 2022-06-01 00:00:36 发布

薛定谔的喵喵喵

最新推荐文章于 2022-06-01 00:00:36 发布

阅读量1k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/gongzhonghua/article/details/80388005

版权

前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

定宽定高（要点 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>

薛定谔的喵喵喵

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
元素页面水平垂直居中方法总结

页面布局经常遇到元素的居中问题，非常重要的点，不过有时有点怕怕的。最快的成长就是直面恐惧嘛，来一波清扫大总结。定宽定高（要点 left:50%;margin-left: -元素w/2）&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;..
复制链接

扫一扫