css实现水平垂直居中

于丸

于 2019-11-12 08:14:14 发布

阅读量139

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Ych_cxy/article/details/103021613

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

第一种:直接计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wai{
				position: relative;
			}
			.nei{
				position: absolute;
				margin-left: 200px;
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<div class="wai" style="background: red;width: 500px;height: 500px;">
			<div class="nei" style="width: 100px;height: 100px;background: blue;">
			</div>
		</div>
	</body>
</html>

第二种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wai{
				position: relative;
			}
			.nei{
				position: absolute;
				margin: auto;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="wai" style="background: red;width: 500px;height: 500px;">
			<div class="nei" style="width: 100px;height: 100px;background: blue;">
			</div>
		</div>
	</body>
</html>

第三种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wai{
				position: relative;
			}
			.nei{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="wai" style="background: red;width: 500px;height: 500px;">
			<div class="nei" style="width: 100px;height: 100px;background: blue;">
			</div>
		</div>
	</body>
</html>

第四种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wai{
				display: flex;
				justify-content: center;
				align-items: center;

			}
			.nei{
				
			}
		</style>
	</head>
	<body>
		<div class="wai" style="background: red;width: 500px;height: 500px;">
			<div class="nei" style="width: 100px;height: 100px;background: blue;">
			</div>
		</div>
	</body>
</html>

第五种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wai{
				/*父元素变成表格的一个单元*/
				display: table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.nei{
				display: inline-block;
				
			}
		</style>
	</head>
	<body>
		<div class="wai" style="background: red;width: 500px;height: 500px;">
			<div class="nei" style="width: 100px;height: 100px;background: blue;">
			</div>
		</div>
	</body>
</html>