图片和文字自适应居中与CSS垂直水平居中
图片居中：
css代码：
.banner{
width:100%;
position:relative;
height:600px;
overflow:hidden;
}
.banner img {
height: 100%;
width: auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
html代码：
<div class="tb_banner">
<a href="/zixun">
<img src="images/banner2.jpg">
</a>
</div>
文字居中：依然是用transform的思想，内部容器相对于外部容器绝对定位，上边top和左边left各偏移50%，再使用transform属性转换。
css代码：
.outside{
width: 500px;
height: 255px;
margin: 0 auto;
background: #ccc;
overflow: hidden;
position: relative;
border-radius: 4px;
}
.inside {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
p {
text-align: center;
}
html代码：
<div class="outside">
<div class="inside">
<p>
我是居中的
</p>
</div>
</div>
