老师，麻烦检查一下~还有我的登录按钮算是垂直居中了吗？

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>圣杯布局</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
			list-style:none;
			text-decoration:none;
			font-family:"微软雅黑";
			
		}
		.header,
		.container,
		.footer{
			min-width:700px;
		}
		.header img{display:block;}
		.clear{clear:both;}
		
		.header img{
			height:90px;
		}
		.header,
		.footer{
			float:left;
			width:100%;
			height:90px;
			background:black;
		}
		.header img{
			position:absolute;
			left:0px;
		}
		.header ul{
			position:absolute;
			right:0px;
		}
		.header ul li{
			display:inline;
			line-height:90px;
			margin:0px 35px 0px 35px;
			font-size:25px;
		}
		.header a,.footer a:link{color:white;}
		.header a:hover{color:orange;}
		.footer ul{text-align:center;}
		.footer ul li{
			display:inline;
			line-height:90px;
			margin:0px 35px 0px 35px;
			font-size:20px;
		}
		.container{
			padding:0px 350px 0px 400px;
		}
		.container a{
			color:black;
		}
		.middle,
		.left,
		.right{
			position:relative;
			float:left;
		}
		.middle{
			/*min-width:800px;*/
			width:100%;
			height:760px;
			background:pink;
			float:left;
		}
		.middle img{
			margin:100px 0 0 200px;
		}
		.left{
			width:400px;
			height:760px;
			float:left;
			margin-left:-100%;
			left:-400px;
			background:#ffffcc;
		}
		.right{
			width:350px;
			height:760px;
			float:left;
			margin-left:-350px;
			right:-350px;
			background:#33CCCC;
		}
		.left h3{
			font-size:30px;
			margin:100px 0 10px 55px;
		}
		
		.left li{
			margin-top:25px;
			margin-left:55px;
		}
		.left span{
			background:#ff9999;
		}
		.right h3{
			font-size:30px;
			margin:100px 0 10px 10px;
		}
		.right table{
			margin-left:10px;
		}
		.right input{
			border:1px #999 solid;
			margin-top:20px;
			width:300px;
			height:45px;
			line-height:45px;
			text-indent:15px;
		}
		.right .login{
			width:303px;
			text-indent:0;
			text-align:center;
			background:red;
			color:white;
			font-size:20px;
		}
	</style>
</head>
<body>
<!-- 页头 -->
	<div class="header">
		<a href="#1"><img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"></a>
		<ul>
			<li><a href="#2">课程</a></li>
			<li><a href="#3">职业路径</a></li>
			<li><a href="#4">实战</a></li>
			<li><a href="#5">猿问</a></li>
			<li><a href="#6">手记</a></li>
		</ul>
		<!-- <div class="clear"></div> -->
	</div>
<!-- 容器 -->
	<div class="container">
		<div class="middle">
			<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
		</div>
		<div class="left">
			<h3>课程推荐</h3>
			<ul>
				<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#13">HTML5与CSS3实现动态网页</a></li>
				<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#14">零基础入门Android语法与界面</a></li>
				<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#15">iOS基础语法与常用控件</a></li>
				<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#16">PHP入门开发</a></li>
				<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#17">JAVA入门开发</a></li>
			</ul>
		</div>
		<div class="right">
			<h3>登录</h3>
			<table>
				<tr>
					<td>
						<input type="text" name="user" placeholder="请输入登录邮箱/手机号" maxlength="25">
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" name="paw" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16">
					</td>
				</tr>
				<tr>
					<td>
						<input class="login" type="button" name="login" value="登录">
					</td>
				</tr>
			</table>
		</div>
	</div>
<!-- 页尾 -->
	<div class="footer">
		<ul>
			<li><a href="#7">网站首页</a></li>
			<li><a href="#8">企业合作</a></li>
			<li><a href="#9">人才招聘</a></li>
			<li><a href="#10">联系我们</a></li>
			<li><a href="#11">常见问题</a></li>
			<li><a href="#12">友情链接</a></li>
		</ul>
		
	</div>
</body>
</html>

来自小白的倔强 2019-08-21

源自：CSS网页布局基础 3-3 编程练习