块级元素垂直居中

qq_46302247

已于 2022-02-14 10:39:33 修改

阅读量441

点赞数

文章标签： css3 css html

于 2022-02-11 13:54:25 首次发布

本文链接：https://blog.csdn.net/qq_46302247/article/details/122878814

版权

在这里插入图片描述

可参考：https://blog.csdn.net/zhang_yu_ling/article/details/90272623
1、 display: flex;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
				display: flex;
				align-items: center;/*垂直居中*/
				/*justify-content: center;*//*水平居中*/
				
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

2、子绝父相—用法1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;	
				position: relative;			
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: absolute;
				top: 50%;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

3、子绝父相—用法2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
				position: relative;
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

4、子绝父相—用法3

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
				position: relative;
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

在这里插入图片描述

5、子元素为position: relative （position: relative的元素是相对自身原本的位置进行偏移，并且保留它原本的位置）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

qq_46302247

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级元素垂直居中

可参考：https://blog.csdn.net/zhang_yu_ling/article/details/902726231、 display: flex;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .out{ width: 500px; height: 500px;
复制链接

扫一扫