在进入主页的时候我想设置两个按钮，一个是黑色一个是白色
怎么让这两个按钮在网页的正中间呀。不管窗口如何变大变小。
7 个解决方案
#1
<font align="center"></font>
#2
这个没用。只有左右居中 不能上下居中
#3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" align="center">
按钮
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" align="center">
按钮
</td>
</tr>
</table>
</body>
</html>
#4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical centering in valid CSS</title>
<style type="text/css">
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */
div.greenBorder {border: 1px solid green; background-color: #FFF;}
p{margin: 1em;}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
<table><tr><td>我就喜欢在中间</td></tr></table>
</div>
</div>
</div>
</body>
</html>
#5
用position:absolute;绝对定位
#6
谢谢 你的很有用
#7
谢谢，你的也可以
#1
<font align="center"></font>
#2
这个没用。只有左右居中 不能上下居中
#3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" align="center">
按钮
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" align="center">
按钮
</td>
</tr>
</table>
</body>
</html>
#4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical centering in valid CSS</title>
<style type="text/css">
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */
div.greenBorder {border: 1px solid green; background-color: #FFF;}
p{margin: 1em;}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
<table><tr><td>我就喜欢在中间</td></tr></table>
</div>
</div>
</div>
</body>
</html>
#5
用position:absolute;绝对定位
#6
谢谢 你的很有用
#7
谢谢，你的也可以