垂直居中

<div class="wrap">
		1211111
	</div>
	<div class="wrap">
		<img src="images/stars.png" alt="">
	</div>
	<div class="wrap">
		<div class="a"></div>
	</div>
.wrap{width: 500px;padding: 20px 0;}

父元素高度不确定，

父元素高度确定的垂直居中
方法一
<table>
		<tr>
			<td>
				<div>112</div>
				<div>112</div>
				<div>112</div>
				<div>112</div>
			</td>
		</tr>
	</table>

td的vertical-align默认middle，不用设置
td{width: 300px;height: 300px;}

方法二

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border:1px solid red;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  word-wrap: break-word;
  text-align: left;
}

　　

转载于:https://www.cnblogs.com/wz0107/p/5054098.html