CSS之水平垂直居中

代码

<div class='page-not-find'>
<h1 class='page-not-find-text'>404!页面不存在</h1>
</div>

第一种水平垂直居中方式

<style>
.page-not-find {
		width:300px;
		height:300px;
	    display: flex;
	    background-color:red;
	    align-items: center;
	    justify-content: center;
}
.page-not-find-text{
		width:20px;
		height:20px;
		background-color:green;
}
<style>

第二种水平垂直居中

<style>
	.page-not-find {
            position: relative;
            width:300px;
	        height:300px;
	        background-color:red;
     }
     .page-not-find-text{
         	width:20px;
	        height:20px;
	        background-color:green;
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
	}
<style>

第三种水平垂直居中

<style>
	.page-not-find {
		width:300px;
		height:300px;
		position:reative;
		background-color:red;
}
.page-not-find-text{
		width:20px;
    	height:20px;
     	background-color:green;
		position: absolute;
		top:50%
		left:50%
		margin-left:10px;
		margin-top:10px;
}
<style>

第四中水平垂直居中

<style>
.page-not-find {
	height: 200px;
	width: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
}
</style>