css 定位屏幕中央

使用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>


版权声明：本文为u014034079原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。