不定宽高，盒子在父盒子水平竖直居中

一、flex布局

	

		
嘻嘻嘻嘻嘻嘻我嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻
	

		*{
			margin: 0;
			padding: 0;
		}
		.wrap {
			height: 330px;
			width: 330px;
			background-color: red;
			display: flex;
			justify-content: center;  /*justify-content属性定义了项目在行轴上的对齐方式*/
			align-items: center;     /*align-items属性定义项目在竖轴上如何对齐*/
		}
		.child {
			width: 50%;
		}

 

二、transform属性

		*{
			margin: 0;
			padding: 0;
		}
		.wrap {
			height: 330px;
			width: 330px;
			background-color: red;
			position: relative;
		}
		.child {
			position: absolute;
			top: 50%;                         /*相对父盒子高度*/
			left: 50%;                        /*%相对于父盒子的宽度*/
			transform: translate(-50%,-50%);  /*%是相对于自身的宽度和高度*/
			width: 50%;
		}