您好，我想尝试将此标题置于中心位置。如图所示，它只是不去中心，这真的让我很烦。 问题截图:https://i.imgur.com/tJhbKS1.jpg
如果无论如何您也可以使它变得更好，那就太好了。我的目标最终是使中心框向下拉伸(stretch) 100% 的屏幕
我这篇文章的主要重点是让中心正文框中的文本基本上有标题
test
放在中心，然后测试
在中心下方一点点，所以当我写的时候它会在中心，当它到达盒子的末端时它会换行/。我也想要它，这样盒子就固定在原处，永远不会移动。
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/site.css">
</head>
<body>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">About</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float: right; "><a href="#about">Login</a></li>
</ul>
<div class="body-container">
<div class="menu">
<div class="title">
<h1>test</h1>
</div>
<div class="body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>最佳答案
删除 .body-container .menu .title 中的 padding-left:50%; 以使标题居中。此外，您使用了 display:flex，这会导致子线不居中。
查看此 Codepen。 https://codepen.io/dmnktoe/pen/wOyxor
(更新:我建议您不要为您的元素使用绝对位置，因为它不是很灵敏。)
关于HTML 不会居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55168052/