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

ゝ一世哀愁。 2021-09-15 19:08 263阅读 0赞

标签的水平垂直居中，在面试及日常项目中非常常见，常用的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>

效果图如下：

![70][]标签水平居中对齐

[70]: /images/20210802/0bc5ad5c4b43481d84644b1d2b088885.png