实现水平垂直居中的几种方式

CSS实现盒子模型实现水平居中

1.position + transform

.box {
			width: 1000px;
			height: 500px;
			background: #eee;
			position: relative;
		}
		.content {
			width: 500px;
			height: 200px;
			background: pink;
			position: absolute;	
			left: 50%;
			top: 50%;
			transform: translate(50%,50%);		
			
		}
	<div class="box">
		<div class="content"></div>
	</div>

2.利用 margin

.box {
			width: 1000px;
			height: 500px;
			background: #eee;
			position: relative;
		}
		.content {
			width: 500px;
			height: 200px;
			background: pink;
			position: absolute;	
			top: 0;
	    	bottom: 0;
	    	left: 0;
	    	right: 0;
	    	margin: auto;

		}

3.利用flex布局

.box {
			width: 1000px;
			height: 500px;
			background: #eee;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.content {
			width: 500px;
			height: 200px;
			background: pink;
	    }

CSS实现文字水平垂直居中

        .content {
			width: 500px;
			height: 200px;
			background: pink；
		}
		p {
			text-align: center;
			line-height: 200px；
		}
	<div class="content">
		<p>文字水平垂直居中</p>
	</div>