为什么这两个东西不能垂直居中？http://www.imooc.com/video/2513

			<div class="note">
				<div class="note_left">
					<div class="news">
						<span>新闻中心</span>
						<a href="">More>></a>
					</div>
					<div class="center">
						<div class="main">
							<img src="images/news.jpg" />
							<div class="center_news">
								<h5>520 慕女神喊你来表白！</h5>
								<p>活动时间：5月20日—5月25日<br/>获奖公布时间：5月26日</p>
								<a href="">More >></a>
							</div>
						</div>
					</div>
					<div class="note_bottom"></div>
				</div>
				<div class="note_middle">
					<div class="news"><span>课程中心</span><a href="">More >></a></div>
					<div class="center"></div>
					<div class="note_bottom"></div>
				</div>
				<div class="note_right">
					<div class="news"><span>媒体聚焦</span><a href="">More >></a></div>
					<div class="center"></div>
					<div class="note_bottom"></div>
				</div>
			</div>

.note{height: 250px;background-color: white;}
.note_left,.note_middle,.note_right{height:250px;border: 1px solid #e8e8e8;float: left;}
.note_left{width: 340px;}
.note_middle{width: 410px;margin-left: 7px;}
.note_right{width: 230px;margin-left: 7px;}
.news{height: 35px;border-bottom: 1px solid #e8e8e8;}
.news span{display: inline-block;float: left;margin-left: 20px;color: gray;line-height:35px;font-weight: bolder;}
.news a{display:inline-block;float: right;margin-right: 20px;color: gray;line-height: 35px;}
.news a:hover{color: #990000;}
.center{height: 110px;border-bottom: 1px solid #E8E8E8;}
.main{height:110px;line-height:110px;}
.center img{float: left;margin-left: 10px;vertical-align: middle;}
.center_news{line-height: 22px;float: right;margin-right: 50px;}
.center_news h5{color: #990000;}
.center_news a{color: #990000;}

如图，感谢回答！