css样式：
.table{border-left:1px solid #CCC border-top:1px solid #CCC width:600px height:160px position:absolute left:50% top:50% margin-left:-300px margin-top:-80px}
.table th{background:#EEE}
.table th, .table td{border-right:1px solid #CCC border-bottom:1px solid #CCC line-height:2em padding:8px}
.table *{margin:auto text-align:center}
html代码：
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<th>SNS</th>
<th>浏览器</th>
<th>视频网站</th>
</tr>
<tr>
<td>facebook</td>
<td><img src="http://www.baidu.com/img/logo-yy.gif" /></td>
<td>youtube</td>
</tr>
<tr>
<td><img src="http://www.oakpacific.com/zh/images/rr-logo.png" /></td>
<td>Google</td>
<td>土豆网</td>
</tr>
</table>
做法如下： 1.为表格(<table>标签)设置一个具体的宽度
2.添加一个属性 margin: 0 auto
具体代码如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<title>Hello, HTML5</title>
<style>
/* 在此处填写叠层样式 */
body, html{
height: 100%
width: 100%
margin: 0 padding: 0
}
table {
height: 80%
width: 80% /* 必须设置一个宽度， margin: 0 auto才能使之居于父组件中央*/
margin: 10px auto /* 通过设置外边距（margin）中的左右外边距属性为auto使之居于父组件（body）中间*/
}
table tr{
height: 40px
width: 100%
background-color: red
}
table>tr>td{
height: 100% width: 33.3%
background-color: red
}
</style>
<script>
/* 在此处填写JavaScript代码 */
</script>
</head>
<body>
<table>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- 在此处编写HTML页面 -->
</body>
</html>
1、首先先在页面里加载一张图片，代码和效果如下图所示：
2、然后设置给图片起一个class名，方便一会儿的操作。
3、然后给图片设置css样式，因为方便的原因就直接在html页面写css样式了。
4、经常使用“margin: 0 auto”来实现水平居中，而一直认为“margin: auto”是不能实现垂直居中，但是实际上，仅需要添加一些限制便能实现效果，就是通过定位：
position: absolute
top: 0
left: 0
bottom: 0
right: 0
设置定位让上下左右都为0，然后通过margin：0 auto，来让元素实现上下左右都居中。
5、设置完CSS样式之后，通过浏览查看代码的效果就可以，可以看到图片已经实现了。
6、最后给大家附上全部的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用CSS让图片水平垂直居中</title>
</head>
<body>
<img class="pic" src="img/timg.jpg" alt="" />
</body>
<style type="text/css">
.pic{
margin: auto
position: absolute
top: 0
left: 0
bottom: 0
right: 0
}
</style>
</html>
