CSS实现元素垂直居中的方法小结

最新推荐文章于 2023-08-12 22:49:16 发布

天府第5街①号切图仔

最新推荐文章于 2023-08-12 22:49:16 发布

阅读量306

点赞数 1

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/hemyWeb/article/details/78446301

版权

复制源码至编辑器查看即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.parents {
			width: 300px;
			height: 300px;
			border: 1px solid red;
			margin: 0 0 50px 0;
		}
		.son{
			width: 100px;
			height: 100px;
			background: red;
		}
		.onePar{
			position: relative;
		}
		.oneSon{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
		.twoPar{
			position: relative;
		}
		.twoSon{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		.threePar {
			position: relative;
		}
		.threeSon{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.fourPar{
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		.fourSon{
			display: inline-block;
		}
		.fivePar{ 
			text-align: center;
		}
		.fivePar:before{ 
			content: ''; 
			display: inline-block; 
			vertical-align: middle; 
			height: 100%; 
			background: yellow;
		}
		.fiveSon{ 
			display: inline-block; 
			vertical-align: middle; 
		}
		.sixPar{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.sixSon{

		}
	</style>
</head>
<body>
	<h1>1</h1>
	<div class="parents onePar">
		<div class="son oneSon">111</div>
	</div>

	<h1>2</h1>
	<div class="parents twoPar">
		<div class="son twoSon">111</div>
	</div>

	<h1>3</h1>
	<div class="parents threePar">
		<div class="son threeSon">111</div>
	</div>

	<h1>4</h1>
	<div class="parents fourPar">
		<div class="son fourSon">111</div>
	</div>

	<h1>5</h1>
	<div class="parents fivePar">
		<div class="son fiveSon">111</div>
	</div>

	<h1>6</h1>
	<div class="parents sixPar">
		<div class="son sixSon">111</div>
	</div>

</body>
</html>