Html 如何使div保持在页面的中心位置，并且在文本和图像之间没有太多的空间？

我希望带有标题、p文本和图像的div在页面中心对齐，并且在每个标记之间没有那么大的空间。我想我能够正确地将它居中对齐，但是我在消除文本和图像之间的所有距离时遇到了困难。我想在它们之间留一点空间，但不要留太多的空间，因为它看起来太远，使页面太长

我使用的是Dreamweaver，当我在Chrome浏览器中预览网页时，它会显示标题、p文本和图像，它们之间都有一堆空间，就像它们彼此间隔太远一样。（另外，由于某种原因，当我在这里运行代码片段时，它看起来不像在Dreamweaver中那样间隔太长了？）我希望这是有意义的，如果不是，我可以详细说明。多谢各位

*{
保证金：0；
填充：0；
字体系列：拉托，无衬线；
}
.英雄{
宽度：80%；
保证金：自动；
}
navbar先生{
保证金：30像素自动；
显示器：flex；
对齐项目：居中；
高度：25px；
}
保险商实验室{
弹性：1；
文本对齐：右对齐；
}
ulli{
显示：内联块；
列表样式：无；
边际：0.25px；
}
ullia{
文字装饰：无；
颜色：黑色；
填充：0 10px；
位置：相对位置；
}
ullia：：之后{
内容：''；
宽度：0；
高度：10px；
背景：#f14a60；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-35px；
过渡：0.5s；
}
ul li a：悬停：：之后{
宽度：100%；
}
.横幅{
显示器：flex；
边缘顶部：80px；
}
.中柱{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
最小高度：100vh；
}
.中柱p{
文本对齐：居中；
宽度：80%；
填充顶部：0px；
利润率最高：46px；
右边距：46px；
边缘底部：46px；
左边距：46px；
位置：相对位置；
前-11%；
}
.菜单{
顶部：-75px；
位置：相对位置；
}

我们的菜单
我们每天清晨都从明亮的地方开始准备特别的食材，以提供感觉良好、味道更好的早餐和早午餐体验

您为段落标记提供了相同的父类。所以它的最小高度也变成了100vh。你可以练习这个

  * {
    margin: 0;
    padding: 0;
    font-family: lato, sans-serif;
  }
  .hero {
    width: 80%;
    margin: auto;
  }
  .navbar {
    margin: 30px auto;
    display: flex;
    align-items: center;
    height: 25px;
  }
  ul {
    flex: 1;
    text-align: right;
  }
  ul li {
    display: inline-block;
    list-style: none;
    margin: 0 25px;
  }
  ul li a {
    text-decoration: none;
    color: black;
    padding: 0 10px;
    position: relative;
  }
  ul li a::after {
    content: "";
    width: 0;
    height: 10px;
    background: #f14a60;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -35px;
    transition: 0.5s;
  }
  ul li a:hover::after {
    width: 100%;
  }
  .banner {
    display: flex;
    margin-top: 80px;
  }
  .center-column {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    min-height: 140vh;
  }
  .center-column p {
    text-align: center;
    width: 80%;
    padding-top: 0px;
    margin-top: 46px;
    margin-right: 46px;
    margin-bottom: 46px;
    margin-left: 46px;
    position: relative;
    top: -11%;
  }
  .menu {
    top: -75px;
    position: relative;
  } 




<div class="hero">
    <div class="navbar">
      <img
        id="logo"
        src="https://cdn.logo.com/hotlink-ok/logo-social-sq.png"
        width="180"
        alt="logo"
      />
      <ul>
        <li>
          <a href="../index.html">Home</a>
        </li>
        <li>
          <a href="./about.html">About</a>
        </li>
        <li>
          <a href="./menu.html">Menu</a>
        </li>
        <li>
          <a href="./promo.html">Promotions</a>
        </li>
      </ul>
    </div>
    <div class="banner">
      <div class="center-column">
        <h1 style={{ fontSize: "50px", paddingTop: "30px" }}>
          <span>Our</span> Menu
        </h1>
        <p class=" p">
          We start bright and early each morning preparing exceptional
          ingredients to deliver a breakfast and brunch experience that
          feels good and tastes even better.
        </p>
        <img
          class="menu"
          src="https://cdn.logo.com/hotlink-ok/logo-social-sq.png"
          width="300"
          height="300"
          alt="restaurant menu"
        />
      </div>
    </div>
  </div>

*{
保证金：0；
填充：0；
字体系列：拉托，无衬线；
}
.英雄{
宽度：80%；
保证金：自动；
}
navbar先生{
保证金：30像素自动；
显示器：flex；
对齐项目：居中；
高度：25px；
}
保险商实验室{
弹性：1；
文本对齐：右对齐；
}
ulli{
显示：内联块；
列表样式：无；
边际：0.25px；
}
ullia{
文字装饰：无；
颜色：黑色；
填充：0 10px；
位置：相对位置；
}
ullia：：之后{
内容：“；
宽度：0；
高度：10px；
背景：#f14a60；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-35px；
过渡：0.5s；
}
ul li a：悬停：：之后{
宽度：100%；
}
.横幅{
显示器：flex；
边缘顶部：80px；
}
.中柱{
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
文本对齐：居中；
最小高度：140vh；
}
.中柱p{
文本对齐：居中；
宽度：80%；
填充顶部：0px；
利润率最高：46px；
右边距：46px；
边缘底部：46px；
左边距：46px；
位置：相对位置；
前-11%；
}
.菜单{
顶部：-75px；
位置：相对位置；
} 










我们的菜单

我们每天清早就出发，准备好一切
提供早餐和早午餐体验的配料
感觉很好，味道更好。

间距是因为边距和填充css属性很高。您可以通过应用边距将div居中，或者，不好的做法是，您可以使用HTML中心标记。您太棒了，非常感谢您的帮助！我甚至没有意识到修复有多么简单，也没有发现导致此问题的错误。我修好了，看起来很完美，再次感谢！：）