css实现一个盒子垂直居中所有方法总结

absolute + transform

.prent{
	position:relative;
}
.child{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

display:table; + text-align + table-cell + vertical-align（单元格方式）

<div class="parent">
	<div class="child">Demo</div>
</div>
<style>
.parent {
    width: 500px;
    height: 500px;
    background-color: pink;
	text-align：center;/*水平居中*/
	display：table;/*让整个父盒子变成一个块级表格元素*/
}
.child {
      display: table-cell;/*子元素变成一个表格单元格 然后就像在表格里一样，给子元素加个vertical-align: middle多行文字垂直居中*/
      vertical-align: middle;
}
</style>

flex + justify-content + align-items（弹性模型）

.parent {
	display： flex;
	justify-content： center; /* 水平居中 */
	align-items：center; /*垂直居中*/
}

margin:auto;+line-height:盒子高度;

宽高固定写死