如何让div实现居中效果

最新推荐文章于 2023-07-12 20:22:21 发布

@小码哥

最新推荐文章于 2023-07-12 20:22:21 发布

阅读量1.5w

点赞数 13

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42581175/article/details/100063996

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方法一：常见的居中方法，定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*常见的居中:定位方法*/
			.father{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
			}
			.child{
				width:100px;
				height: 100px;
				background-color:blue;
				position: absolute;
				/*
				 * top bottom 为 0垂直居中
				 * left right 为0 则水平居中
				 */
				top: 0;
			    bottom: 0;
			    right: 0;
			    left: 0;
			    margin: auto;
			}
			
		</style>
	</head>
	<body>
		<!-- div 的几种居中方法 -->
		<div style="width:200px;text-align: center; ">方法一：</div>
		<div class="father">
			<div class="child"></div>
		</div>
	</body>
</html>
	}

方法二：负边距居中法


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*负边距居中*/
			.father2{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
			}
			.child2{
				width: 100px;
				height: 100px;
				background-color:blue;
				text-align: center;
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    margin-top: -50px;
			    margin-left: -50px;
			}
		</style>
	</head>
	<body>
		<!-- div 的几种居中方法 -->
		
		<div style="width:200px;text-align: center;">方法二：</div>
		<div class="father2">
			<div class="child2"></div>
		</div>
	
	</body>
</html>

方法三：弹性布局居中（未知宽高也可以）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*弹性布局居中（未知宽高也可以）*/
			.father3{
				width: 200px;
				height: 200px;
				background-color: red;
				margin-bottom: 100px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.child3{
				width: 100px;
			    height: 100px;
			    background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- div 的几种居中方法 -->
		<div style="width:200px;text-align: center;">方法三：</div>
		<div class="father3">
			<div class="child3"></div>
		</div>
	</body>
</html>

@小码哥

关注

13
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
如何让div实现居中效果

方法一：常见的居中方法，定位<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*常见的居中:定位方法*/ .father{ widt...
复制链接

扫一扫

专栏目录