使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
</head>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div, body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
</style>
<body>
<div>
<div>
<table style="background: yellow;">
<tr>
<td>用户名:</td>
<td>密码</td>
</tr>
<tr>
<td>用户名:</td>
<td>密码</td>
</tr>
</table>
</div>
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-680340.html
