HTML+CSS，图片垂直居中，纯CSS写三角形

一点自己的心得：

1，约为高度的0.873，200*0.873 约为175，这里的200是.box的height高度；

2，如果.box需要浮动，加上float:left时，发现垂直居中失效了，可以考虑给.box套上一个父层，然后让父层浮动float:left；

<style type="text/css">
.boxparent{float:left;}
</style>
<div class="boxparent"><div class="box"><img src="" /></div></div>

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175，200是height高度*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}

.zlfw-zhuanjia-list .bd li .pic .picbox {
height: 225px;
display: table-cell;
vertical-align: middle;
background-color: #de5d3e;
text-align:center;
*display: block;
*font-size: 196px;
*font-family:Arial;
}

.zlfw-zhuanjia-list .hd ul li .picbox {
width: 94px;
height: 108px;
display: table-cell;
vertical-align: middle;
text-align:center;
text-align: center;
background-color: #de5d3e;
*display: block;
*font-size: 94px;
*font-family:Arial;
}
/*纯css，出现三角形*/
#triangle-up {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #e47a60;
line-height: 0px;
display: inline-block;
*border-style:solid dashed dashed dashed;
}