css垂直居中

< div class=“parent”>
< div class=“child”>content< /div>
< /div>
.parent{
width: 100px;
height: 100px;
border: 1px solid;
}
原图：

垂直居中：
1.

.parent{
			width: 100px;
			height: 100px;
			border: 1px solid;
			display: table;
		}
		.child{
			display:table-cell;
			vertical-align:middle; 
		}

2.

.parent{
			width: 100px;
			height: 100px;
			border: 1px solid;
			display: flex;
			align-items: center;
		}

3.

.parent{
			width: 100px;
			height: 100px;
			border: 1px solid;
			position: relative;
		}
		.child{
		position:absolute; 
		top:50%;
		transform:translateY(-50%);
		}