写了前面一段，为什么连个居中效果都没，崩溃~
<!DOCTYPE HTML>
<HTML>
<head>
<title>preview slideshows</title>
<meta charset="utf-8">
<style>
*{
padding: 0;
margin: 0;
}
/*初始化所有padding和margin*/
body{
padding:50px 0;
background-color: #fff;
font-size:14px;
font-family: 'Avenir Next';
color:#555;
-wekit-font-smoothing:antialiased;
}
.slider.mian.mian-i,
.slider.mian,
.slider{
width: 100%;
height:400px;
position:relative;
}
/*huandengpian yangshi */
.slider.mian{
overflow: hidden;
}
.slider.mian.mian-i{}
.slider.mian.mian-i img{
width: 100%;
position: absolute;
left:0;
top: 0;
z-index: 1;
}
.slider.mian.mian-i.caption{
position: absolute;
right: 50%;
top:30%;
z-index: 9;
}
.slider.mian.mian-i.caption h2{}
.slider.mian.mian-i.caption h3{}
/* kong zhi an niu*/
</style>
</head>
<body>
<div class="slider">
<div class="mian">
<div class="mian-i">
<div class="caption">
<h2>h2 caption</h2>
<h3>h3 caption</h3>
</div>
<img src="imgs/{{index}}.jpg">
</div>
</div>
<div class="ctrl">
<a class="ctrl-i" href="javascript"><img src="imgs/{{index}}.jpg"></a>
</div>
</div>
</body>
</html>
