实现子div在父div中垂直居中

最新推荐文章于 2024-04-23 20:50:55 发布

庆庆123456789

最新推荐文章于 2024-04-23 20:50:55 发布

阅读量1.9w

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/qq_28493675/article/details/79199125

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、改变布局流，此时水平方向居中失效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/three-line.css" />
	<body>
		<div class="father">
			<div class="child">
			</div>
		</div>
	</body>
</html>

*{
	margin:0;
	padding:0;
}
.father{
	width:100%;
	height:200px;
	background-color: brown;
	writing-mode: vertical-lr;
}
.child{
	width:500px;
	height:100px;
	background-color: grey;
	margin:auto;
}

效果：水平居中此时失效（如图）

2、父元素：relative。子元素：absolute。（此方法左右上下皆居中）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/three-line.css" />
	<body>
		<div class="father">
			<div class="child">
			</div>
		</div>
	</body>
</html>

*{
	margin:0;
	padding:0;
}
.father{
	width:100%;
	height:200px;
	background-color: brown;
	position:relative;
	
}
.child{
	background-color: grey;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width: 300px;
	height:100px;
	margin:auto;
	
}

实现效果：

庆庆123456789

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
实现子div在父div中垂直居中

1、改变布局流，此时水平方向居中失效 *{ margin:0; padding:0;}.father{ width:100%; height:200px; background-color: brown; writing-mode: vertical-lr;}.child{ width:500px; he
复制链接

扫一扫