这是我的代码，我一直在尝试将我的 Div (CONTAINER) 居中，但每次它都会粘在左侧，我尝试使用 (align-content，并在 body ，但这并不能解决问题)
我在容器上使用了 ( margin: 0 auto;) ，它确实有效，但容器仍然粘在顶部
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
body {
margin: 0;
padding: 0;
font-family: "karla", sans-serif;
background: lightblue;
}
.container {
width: 300px;
height: 800px;
border: 1px red solid;
background: white;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<title name="second_project">Project</title>
<meta charset="UTF-8">
<meta lang="en">
<link href="index.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div class="container">
<header>
<div class="main">
<h1 class="main_heading mainco">Join out community</h1>
<h2 class="sub_heading">30-day, hassle-free money back guarantee</h2>
<p class="main_content">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills</p>
</div>
<main>
<section>
<div class="split">
<div>
<h1>Monthly Subscription</h1>
<span>$29<span>per month</span></span>
<h1>Full access for less than $1 a day</h1>
</div>
<div>
<button>Sign Up</button>
</div>
</div>
</section>
<section>
<div class="split">
<div>
<h1>Why us</h1>
</div>
<div>
<ul class="reasons">
<li class="items">Tutorials by industry experts.</li>
<li class="items">Peer & expert code review</li>
<li class="items">Coding exercises</li>
<li class="items">Access to our GitHub repos</li>
<li class="items">Community forum</li>
<li class="items">FlashCard decks</li>
<li class="items">New videos every week</li>
</ul>
</div>
</div>
</section>
</main>
</header>
</div>
</body>
</html>最佳答案
如果你想使用flex，flex css需要位于你想要居中的元素的父元素上，如下所示:
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
font-family: "karla", sans-serif;
background: lightblue;
}
.container {
width: 300px;
height: 800px;
border: 1px red solid;
background: white;
}<!DOCTYPE html>
<html>
<head>
<title name="second_project">Project</title>
<meta charset="UTF-8">
<meta lang="en">
<link href="index.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div class="container">
<header>
<div class="main">
<h1 class="main_heading mainco">Join out community</h1>
<h2 class="sub_heading">30-day, hassle-free money back guarantee</h2>
<p class="main_content">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills</p>
</div>
<main>
<section>
<div class="split">
<div>
<h1>Monthly Subscription</h1>
<span>$29<span>per month</span></span>
<h1>Full access for less than $1 a day</h1>
</div>
<div>
<button>Sign Up</button>
</div>
</div>
</section>
<section>
<div class="split">
<div>
<h1>Why us</h1>
</div>
<div>
<ul class="reasons">
<li class="items">Tutorials by industry experts.</li>
<li class="items">Peer & expert code review</li>
<li class="items">Coding exercises</li>
<li class="items">Access to our GitHub repos</li>
<li class="items">Community forum</li>
<li class="items">FlashCard decks</li>
<li class="items">New videos every week</li>
</ul>
</div>
</div>
</section>
</main>
</header>
</div>
</body>
</html>关于html - 在这种情况下如何将 div 专门居中放置在我的容器中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69379168/