Question

css样式中图片如何垂直水平居中

Answer 1

.test{

    height:200px;/*块高度  这里是测试高度*/

    font-size:175px;/**约为高度的0.873，200*0.873 约为175*/

   /*非IE的主流浏览器识别的垂直居中的方法*/

   display: table-cell;
   vertical-align:middle;
   
   /*设置水平居中*/
   text-align:center;
   
   /* 针对IE的Hack */

   *display: block;  

   *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

}

.test img {
    /*设置图片垂直居中*/
    vertical-align:middle;
}

Answer 2

.test{
height:200px;/*块高度 这里是测试高度*/
font-size:175px;/**约为高度的0.873，200*0.873 约为175*/
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*设置水平居中*/
text-align:center;

/* 针对IE的Hack */
*display: block;
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.test img {
/*设置图片垂直居中*/
vertical-align:middle;
}