我想用css在窗口中间放一个盒子，但是不行。例如，html 元素的高度似乎不是 100%。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
body {
margin: auto;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
box
</body>
</html>
最佳答案
乱用 html 和 body 使其显示:table-cell 或其他东西不是一个好主意
相反，试试这个代码:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>box</div>
</body>
</html>
关于html - 页面中间的框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14775367/