                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

如何設(shè)置豎直居中？？？

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>無標(biāo)題文檔</title>
</head>
<style>
body,div,span{
padding:0;
margin:0; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //初始化邊框
}
#div1{
? ?width:300px;
? ?height:400px;
? ?background: #39c;
? ?position:relative; ? ? ? ? ? ? ? ? ?// //給大框設(shè)置長寬高
top:100px;
? ?left:-200px;
}
#div1 span{
width:33px;
height:110px;
background: #3cf;
position: absolute; ? ? ? ? ? ? //給小框設(shè)置長寬高
top:400px;
left:200px;
font-family: "微軟雅黑";
color: #FFF;
font-weight: bold; ? ? ? ? ? ? ?//默認(rèn)字符
}
</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>