如何使用高级CSS属性将div居中到body？

llycmphe 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(112)

此问题已在此处有答案：

How can I vertically center a div element for all browsers using CSS?（48回答）
11天前关闭
此帖子5天前编辑并提交审核，未能重新打开帖子：
原始关闭原因未解决
使用flexbox、align-items和justify内容将div居中对齐。
我有下面的css代码来居中我的div，但它对我不起作用。

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: 'Karla', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: skyblue;
}

.container {
  background-color: white;
  padding: 80px;
  border-radius: 8px;
}

请告诉我哪里错了。输出：

css

来源：https://stackoverflow.com/questions/75851394/how-can-i-center-my-div-to-my-body-using-advanced-css-properties

2条答案

按热度按时间

lp0sw83n1#

这是因为<body>标签的内容比viewport小，所以它不会在整个屏幕上居中。要解决这个问题，请使用width: 100vh;创建一个外部<div>，它具有viewport的整个高度，然后将内容<div>放入其中：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Karla', sans-serif;
}

.outer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: skyblue;
  height: 100vh;
}

.inner {
  background-color: white;
  padding: 80px;
  border-radius: 8px;
  height: 100px;
  width: 100px;
}

<div class="outer">
  <div class="inner">
    <h1>Test Content</h1>
  </div>
</div>

注意：运行代码片段并将其作为完整页面打开以查看完整效果。

赞(0）回复(0）举报 2023-04-08

ipakzgxi2#

index.html和style.css文件，如果您想将hello world居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div>
      <h1>hello world</h1>
      <p>this is my first webpage...</p>
    </div>

    <script src="src/script.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  font-family: 'Karla', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: skyblue;
}

.container {
  background-color: white;
  padding: 80px;
  border-radius: 8px;
}

h1 {
  text-align: center;
}

赞(0）回复(0）举报 2023-04-08

我来回答

如何使用高级CSS属性将div居中到body？

2条答案

相关问题

热门标签

最新问答