盒子内容垂直居中

盒子内容垂直居中有两种：
1.给父级加上相对定位position:relative; 给子元素添加绝对定位position:absolute;
设置top,right,bottom,left的值都是0；调整margin内边距为自适应auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 800px;
				height: 700px;
				background-color: #999999;
				position: relative;
			}
			.main .main1{
				width: 300px;
				height: 300px;
				background-color: red;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

盒子内容垂直居中
第二种方法：
1.将父级变成单元格，display:table-cell; 设置内部元素垂直对齐vertical-align:middle;
text-align:center; 居中
2.子元素配合父元素，变成行内块级元素display:inline-block;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				display: table-cell;/*变成表格单元格*/
				vertical-align: middle;
				text-align: center;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

盒子内容垂直居中
第三种与第一种相似
1.给父级加上相对定位position:relative; 给子元素添加绝对定位position:absolute;
设置top,left,margin-top:-自身高度的一半；margin-left:-自身宽度的一半；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				position: relative;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 50%;
				margin-top: -150px;
				left: 50%;
				margin-left: -150px;
		}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

盒子内容垂直居中
第四种需要用到弹性盒子。简单方便
1.给弹性容器(父容器)添加display:flex;
2.给弹性容器的子元素加上 margin:auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				display: flex;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

盒子内容垂直居中
效果一样简单便捷。

盒子内容垂直居中

相关推荐