css水平垂直居中

简介div水平垂直居中...越来越懒了，很多东西都懒的写，就喜欢写些没营养的充数，我还在...

1.div水平垂直居中方法1：
<div class="box"></div>

<!--样式如下-->
<style type="text/css">
	.box{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -150px;
		margin-top: -150px;
		width: 300px;
		height: 300px;
		background: cornsilk;
	}
</style>

2.不确定div宽高情况下的水平垂直居中方法：
<div class="box">水平垂直居中了</div>

<!--样式如下-->
<style type="text/css">
	.box{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
</style>

3.子Div 相对于 父div 水平垂直居中

<!--box为父div-->
<div class="box">
	<div class="item"><!--item为子div--></div>
</div>

<!--样式如下-->
<style type="text/css">
	.box{
		width: 300px;
		height: 300px;
		background: cornsilk;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box .item{
		width: 150px;
		height: 150px;
		background: cornflowerblue;
	}
</style>

结尾：我也不知道为什么写这个。。。