css标签水平垂直居中的4中常用方法及适用场景

标签的水平垂直居中，在面试及日常项目中非常常见，常用的4种方法如下：

方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin: auto;注意：IE7及之前版本不支持；

方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半；

方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%

方案四：父级转变为弹性盒子，主轴交叉轴居中对齐；

具体代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>标签水平垂直居中</title>
		<style type="text/css">
			.container {
				width: 880px;
			}
			
			.wrapper {
				margin: 10px;
				float: left;
				width: 200px;
				height: 200px;
				background: blue;
				border-radius: 10px;
			}
			
			.center {
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background: red;
				border-radius: 5px;
			}
			/*方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin: auto;注意：IE7及之前版本不支持*/
			
			.wrapper1 {
				position: relative;
			}
			
			.center1 {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			/*方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半*/
			
			.wrapper2 {
				position: relative;
			}
			
			.center2 {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -50px;
			}
			/*方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%*/
			
			.wrapper3 {
				position: relative;
			}
			
			.center3 {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			/*方案四：父级转变为弹性盒子，主轴交叉轴居中对齐*/
			
			.wrapper4 {
				/*父级转变为弹性盒子*/
				display: flex;
				/*项目在主轴上的居中对齐*/
				justify-content: center;
				/*项目在交叉轴上居中对齐。*/
				align-items: center;
			}
			
			.center4 {}
			
			.des {
				text-indent: 2rem;
				font-size: 18px;
				word-spacing: 2px;
				box-sizing: border-box;
				padding: 20px 10px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="wrapper wrapper1">
				<div class="center center1">
					方案一
				</div>
			</div>
			<div class="wrapper wrapper2">
				<div class="center center2">
					方案二
				</div>
			</div>
			<div class="wrapper wrapper3">
				<div class="center center3">
					方案三
				</div>
			</div>
			<div class="wrapper wrapper4">
				<div class="center center4">
					方案四
				</div>
			</div>

			<div class="wrapper des">
				方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin: auto;注意：IE7及之前版本不支持
			</div>
			<div class="wrapper des">
				方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半
			</div>
			<div class="wrapper des">
				方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%
			</div>
			<div class="wrapper des">
				方案四：父级转变为弹性盒子，主轴交叉轴居中对齐
			</div>
		</div>
	</body>

</html>

效果图如下：

标签水平居中对齐

css标签水平垂直居中的4中常用方法及适用场景

猜你喜欢