html垂直居中不了
本人C++小白一枚，被迫学习前端，不懂网页为什么垂直居中不了，我也设置了宽高，百度了一堆方法也没用，好烦{:5_100:}包括白色框也要垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title></title>
</head>
<body style="background-color: #0c85d0">
<div style="width: 500px; height: 500px; background-color: white;">
<div style="width: 100px; height: 100px; background-color: blue; display: flex; justify-content: center; align-items: center">
</div>
</div>
</body>
</html> 你想让这个白色的div和蓝色的div都在页面垂直居中对吗？如果是的话，你可以尝试将父div（白色框）的display设置为flex，并且使用justify-content和align-items属性实现垂直居中。
这是你的代码，我已经为你修改好了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title></title>
</head>
<body style="background-color: #0c85d0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;">
<div style="width: 500px; height: 500px; background-color: white; display: flex; justify-content: center; align-items: center;">
<div style="width: 100px; height: 100px; background-color: blue;"></div>
</div>
</body>
</html>
主要改动：
[*]给<body>标签添加了display: flex; justify-content: center; align-items: center;实现整个页面内容垂直居中。
[*]给<body>标签添加了height: 100vh;，以便占据整个视口高度。
[*]给<body>标签添加了margin: 0;，以去掉浏览器的默认外边距。
[*]删除了蓝色div的display: flex; justify-content: center; align-items: center;，因为蓝色div没有子元素需要居中。
现在白色框和蓝色框都应该在页面垂直居中了。 isdkz 发表于 2023-4-7 11:14
你想让这个白色的div和蓝色的div都在页面垂直居中对吗？如果是的话，你可以尝试将父div（白色框）的display ...
{:5_100:}谢谢大佬指导
页:
[1]