body里就一个<div id="#app"></div>元素,我想让他居中
极客观点
项目管理
HarmonyOS
body{
display: flex;
flex-direction: column;
align-items: center;
}然后居中是居中了，但是旁边有奇怪的留白...
当我选择html元素的时候，它根本没用充满整个画面
代码是这样子的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script></script>
</body>
</html>浏览器会有一些默认的样式，需要去掉，给你一个简单的 css reset, 在所有样式之前加载：
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box; // 这个是设置盒模型，方便计算宽高，可以去掉
}
*, *::before, *::after{
box-sizing: inherit;
padding: 0;
margin: 0;
}你可以在html,body以下的样式：
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow:hidden;
box-sizing: border-box; // 这个是设置盒模型，方便计算宽高，可以去掉
}5 回答4.9k 阅读✓ 已解决
4 回答3.2k 阅读✓ 已解决
3 回答5.2k 阅读✓ 已解决
5 回答2.1k 阅读
2 回答4.8k 阅读✓ 已解决
4 回答4.4k 阅读✓ 已解决
4 回答1.9k 阅读✓ 已解决
可能是中间有子元素撑开了宽度，好好查下能找出来的