水平垂直居中几种方式

1. 子级为块级元素，才可使用，父级定义display:table;子级定义display:table-cell;

<div class="container">
	<div id="star-six">
		321312
	</div>
</div>
.container {
	margin: auto;
	height: 300px;
	width: 300px;
	border: 1px solid blue;
	display: table;
}
#star-six {
	height: 150px;
	width: 150px;
	display: table-cell;
          vertical-align: middle;
          text-align: center;
          border:1px solid #666;
}

2./子级为不确定元素，均可使用，父级定义使用伪类:before;/

.container {
	margin: auto;
	height: 300px;
	width: 300px;
	text-align: center;
	border: 1px solid blue;
}
.container::before{
	content: '';
	width: 1px;
	background: red;
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
#star-six{
	display: inline-block;
}

3.子集使用position:absolute;上下左右为0，并且margin设为auto

<div class="container">
	<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" id="star-six"/>
</div>

.container {
	margin: auto;
	height: 300px;
	width: 300px;
	text-align: center;
	border: 1px solid blue;
	position: relative;
}
#star-six{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border: 1px solid red;
}

4.父级使用display:flex

<div class="container">
	<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" id="star-six"/>
	<!--<div id="star-six"></div>-->
</div>
/*父级使用display:flex*/
.container {
	margin: auto;
	height: 300px;
	width: 300px;
	border: 1px solid blue;
	display: flex;
	/*垂直居中*/
	/*align-items:center;*/
	justify-content: center;/*水平居中*/
}
#star-six{
	align-self: center;
	vertical-align: middle;
	height: 150px;
	width: 150px;
	border: 1px solid red;
}

5.父级使用position:relative，子集用position:absolute

<div class="container">
	<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" id="star-six"/>
	<!--<div id="star-six"></div>-->
</div>
/*父级使用position:relative，子集用position:absolute*/
.container {
	margin: auto;
	height: 300px;
	width: 300px;
	border: 1px solid blue;
	position: relative;
}
#star-six{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}