经历过的前端面试题之div水平居中

最新推荐文章于 2022-10-30 21:23:35 发布

时非我

最新推荐文章于 2022-10-30 21:23:35 发布

阅读量166

点赞数

分类专栏：前端文章标签： css html5 html flex

本文链接：https://blog.csdn.net/qq_41453653/article/details/115339421

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中实现元素居中定位的四种常见方法：绝对定位配合负边距、绝对定位结合margin auto、CSS3 transform平移以及使用Flex布局。每种方法都有其适用场景，例如已知元素尺寸或未知尺寸的情况。通过这些方法，开发者可以灵活地在网页设计中实现元素的精准居中展示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 第一种 绝对定位与负边距 (已知高宽度)*/
			/* .box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
			} */
			/* 第二种 绝对定位与margin:auto (已知高宽度)*/
			/* .box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				margin: auto;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			} */
			/* 第三种 绝对定位+CSS3（未知元素的高宽）*/
			/* .box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				translate: (-50%,-50%);
				-webkit-transform: translate(-50%,-50%);
			} */
			/* 第四种 flex布局 在父容器设置*/
			 /* .container{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			}
			.box{
				height: 200px;
				width: 200px;
				background-color: red;
			} */
			/* 第五种 flex/grid布局与margin:auto 最简单写法*/
			/* .container{
				height: 100vh;
				display: grid;
			}
			.box{
				margin: auto;
				height: 200px;
				width: 200px;
				background-color: red;
			} */
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				
			</div>
		</div>
	</body>
</html>
入代码片