水平垂直居中

WARNING

一个盒子不给宽度和高度如何水平垂直居中

方式一：

<div class='container'>
	<div class='main'>main</div>
</div>

.container{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300px;
		height: 300px;
		border:5px solid #ccc;
}
.main{
		background: red;
}

方式二：

.container{
	  position: relative;
		width: 300px;
		height: 300px;
		border:5px solid #ccc;
}
.main{
		background: red;
		position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
}