[已解决]html垂直居中不了

a327904410 · 发表于 2023-4-7 11:11:58

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本人C++小白一枚，被迫学习前端，不懂网页为什么垂直居中不了，我也设置了宽高，百度了一堆方法也没用，好烦

包括白色框也要垂直居中
屏幕截图 2023-04-07 111120.png

<!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>

复制代码

最佳答案

月排行榜 / 总排行榜

isdkz

2023-4-7 11:14:28

你想让这个白色的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:28

你想让这个白色的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没有子元素需要居中。

现在白色框和蓝色框都应该在页面垂直居中了。

a327904410 · 发表于 2023-4-7 11:16:33

isdkz 发表于 2023-4-7 11:14
你想让这个白色的div和蓝色的div都在页面垂直居中对吗？如果是的话，你可以尝试将父div（白色框）的display ...

谢谢大佬指导

账号		自动登录	找回密码
密码			立即注册

[已解决]html垂直居中不了

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块