垂直居中的六种方案

最新推荐文章于 2021-12-12 23:09:54 发布

weixin_33963189

最新推荐文章于 2021-12-12 23:09:54 发布

阅读量109

点赞数

文章标签： python

原文链接：https://my.oschina.net/shuaihong/blog/1625961

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*方案一：知道宽度的情况下 absolute+margin负值*/
		/*.parent { 
			width:400px;
			height:400px;
			background: red;
			position: relative;
		}
		.child {
		  position: absolute;
		  left:50%;
		  top:50%;
		  background: blue;
		  width:50px;
		  height:50px;
		  margin-left:-25px;
		  margin-top:-25px;
		}*/

		/*方案二：不知道宽高的情况下 absolute+transform*/
		/*
		.parent { 
			width:400px;
			height:400px;
			background: red;
			position: relative;
		}
		.child {
		  position: absolute;
		  left:50%;
		  top:50%;
		  transform: translate(-50%,-50%);
		}*/

		/*方案三：position+margin:auto*/
		/*
		.parent { 
			width:400px;
			height:400px;
			background: red;
			position: relative;
		}
		.child {
		  width:80px;
		  height:40px;
		  background:yellow;
		  position:absolute;
		  left:0;
		  top:0;
		  right:0;
		  bottom:0;
		  margin:auto;
		}*/
		
		/*方案四：多行文本的垂直居中 display:table-cell+vertical-align:middle;*/
		/*.parent {
			height: 300px;
			width: 400px;
			border: 1px solid red;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		.child {
			display: inline-block;
			width: 50px;
			height: 50px;
			background: blue;
		}*/
		
		/*方案五：display: flex*/
		/*.parent {
		  width:400px;
		  height:200px;
		  background:red;
		  display: flex;
		  justify-content:center;
		  align-items:center;
		}
		.child {
		  height:100px;
		  width:100px;
		  background:green;
		}*/

		/*方案六：伪元素*/
		.parent {
		  width:200px;
		  height:200px;
		  background:red;
		  text-align: center;
		}
		.child {
			height:100px;
		  width:100px;
		  background:yellow;
		  display: inline-block;
		  vertical-align: middle;
		}
		.parent:before {
			content: "";
			height: 100%;
			vertical-align: middle;
			display: inline-block;
		}
	</style>
</head>
<body>
	<!-- CSS水平垂直居中解决方案(6种) -->
	<!-- 方案一：知道宽度的情况下 absolute+margin负值 -->
	<div class="parent">
	  <div class="child">child</div>
	</div>
</body>
</html>

效果展示输入图片说明