html - 为什么不能在 flexbox 模型中居中 div

Question

我无法在整个页面宽度上将以下 div 居中对齐：

• 标题
• 内容
• 页脚

但它不起作用！在我的 CSS 中需要更改哪些内容才能使其正常工作？

body {
  margin:0;
  padding:0;
}

#wrapper {
  display: flex;
  flex-direction: column;
}

#header {
  height: 50px;
}

#hero-wrapper { 
  background-image: url('https://unsplash.it/1500?random');
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: calc(100vh - 50px);
  
  display: flex;
  flex-direction: column;
  
  color:#ffffff;
}

#hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
  #hero-text{
    font-family:'Roboto';
    font-weight:900;
    font-size:2em;
    text-align:center;
  }

#hero-footnote {
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  padding: 5px 5px 10px 5px;
}

#content {
  width: 1024px;
  background-color:green;
}

#footer {
  font-family: 'Cabin', sans-serif;
  weight: 400;
  background-color: #ffffff;
  /* position: fixed; */
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.685em;
  color: #1a1717;
  padding-bottom: 5px;
}

#footer-info {
  width: 1024px;
  margin: auto;
  padding-left: 3px;
  padding-right: 3px;
  text-align: left;
  line-height: 42px;
}

span#footer-social-icons {

}
span#copyright-info {
  font-family: 'Cabin', sans-serif;
  weight: 400;
  padding-left:10px;
}

span#contact-link {
  font-family: 'Source Sans Pro', sans-serif;
  weight: 200;
  padding-left:10px;
}

<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght@200&family=Roboto:wght@400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap" rel="stylesheet">

<div id="wrapper">
  
   <div id="header">header</div>
  
   <div id="hero-wrapper">
      <div id="hero">
         <div id="hero-text">
            <span id="hero-header">sell the product</span><br />
            <span id="hero-sub">On this page for less</span>
         </div>
      </div>
      <div id="hero-footnote">&copy; Copyright Text</div>
   </div>
  
   <div id="content">
      <!-- Content-Loop -->
      <div class="article">
         Here come the Article
      </div>
   </div>
  
   <div id="footer">
      <div id="footer-info">
         <span id="footer-social-icons">&#xf102;</span>&nbsp;<span id="copyright-info">Made with love by Y.</span>&nbsp;<span id="contact-link">Contact</span>
      </div>
   </div>
</div>

标签： htmlcssflexbox

Answer 1

您可以添加align-items: center;到#wrapper.

通常情况下，如果你有flex-direction: row;居中的东西，justify-content: center;但随着列改变轴，对齐属性也会改变。他们有点“随心所欲”。

不过有一件事，我强烈建议您不要使用 id 样式，为此使用类。

body {
  margin:0;
  padding:0;
}

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#header {
  height: 50px;
}

#hero-wrapper { 
  background-image: url('https://unsplash.it/1500?random');
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: calc(100vh - 50px);
  
  display: flex;
  flex-direction: column;
  
  color:#ffffff;
}

#hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
  #hero-text{
    font-family:'Roboto';
    font-weight:900;
    font-size:2em;
    text-align:center;
  }

#hero-footnote {
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  padding: 5px 5px 10px 5px;
}

#content {
  width: 1024px;
  background-color:green;
}

#footer {
  font-family: 'Cabin', sans-serif;
  weight: 400;
  background-color: #ffffff;
  /* position: fixed; */
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.685em;
  color: #1a1717;
  padding-bottom: 5px;
}

#footer-info {
  width: 1024px;
  margin: auto;
  padding-left: 3px;
  padding-right: 3px;
  text-align: left;
  line-height: 42px;
}

span#footer-social-icons {

}
span#copyright-info {
  font-family: 'Cabin', sans-serif;
  weight: 400;
  padding-left:10px;
}

span#contact-link {
  font-family: 'Source Sans Pro', sans-serif;
  weight: 200;
  padding-left:10px;
}

<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght@200&family=Roboto:wght@400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap" rel="stylesheet">

<div id="wrapper">
  
   <div id="header">header</div>
  
   <div id="hero-wrapper">
      <div id="hero">
         <div id="hero-text">
            <span id="hero-header">sell the product</span><br />
            <span id="hero-sub">On this page for less</span>
         </div>
      </div>
      <div id="hero-footnote">&copy; Copyright Text</div>
   </div>
  
   <div id="content">
      <!-- Content-Loop -->
      <div class="article">
         Here come the Article
      </div>
   </div>
  
   <div id="footer">
      <div id="footer-info">
         <span id="footer-social-icons">&#xf102;</span>&nbsp;<span id="copyright-info">Made with love by Y.</span>&nbsp;<span id="contact-link">Contact</span>
      </div>
   </div>
</div>