如何设置竖直居中？？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
</head>
<style>
body,div,span{
padding:0;
margin:0; //初始化边框
}
#div1{
width:300px;
height:400px;
background: #39c;
position:relative; // //给大框设置长宽高
top:100px;
left:-200px;
}
#div1 span{
width:33px;
height:110px;
background: #3cf;
position: absolute; //给小框设置长宽高
top:400px;
left:200px;
font-family: "微软雅黑";
color: #FFF;
font-weight: bold; //默认字符
}
</style>
<script>
window.onload=function () {
var oDiv=document.getElementById("div1");
oDiv.onmousemove=function () {
s1Move(0);
}
oDiv.onmouseout=function () {
s1Move(-200);
}
}
var timer=null;
function s1Move(target) {
clearInterval(timer);
var oDiv=document.getElementById("div1");
timer=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft>target){
speed=-20;
}else{
speed=20;
}
if(oDiv.offsetLeft==target){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},50)
}
</script>
<body>
<div id="div1"><span style="text-align: center" id="water">W<br />A<br/>T<br />E<br />R<br /></span></div>
</body>
