html - 如何将特定内容居中？

Question

我有一张幻灯片，其中包含 2 张图片和下面的文字。我只想将它放在标题中间。出于某种原因，我正在挣扎。

应该居中的内容在我的 body 和<div class="main">中

我已经尝试过:

display: flex;    
align-items: center;    
justify-content: center;

它解决了我的标题问题，但它没有解决其余问题。

@font-face {
  font-family: raw;
  src: url('Roboto-Thin.ttf') format('truetype');
}

img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  width: 70%;
}

.slogan {
  background-color: #333;
  font-family: "raw";
  font-size: 18px;
  margin-top: 2px;
  /*padding und borders*/
  width: 70%;
  text-align: center;
  color: #f2f2f2;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.slogan a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 70px;
  text-decoration: none;
  background: #333;
  -o-transition: color 0.4s ease-out, background 0.4s ease-in;
  -ms-transition: color 0.4s ease-out, background 0.4s ease-in;
  -moz-transition: color 0.4s ease-out, background 0.4s ease-in;
  -webkit-transition: color 0.4s ease-out, background 0.4s;
  ease-in;
  /* ...and now override with proper CSS property */
  transition: color 0.4s ease-out, background 0.4s ease-in;
}

.slogan a:hover {
  background: #ddd;
  color: black;
  height: auto;
}


/* The navigation bar */

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 80%;
  /* Full width */
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  font-family: "raw";
  font-size: 12px;
  margin-bottom: 0;
}

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


/* Change background on mouse-over */

.navbar a:hover {
  background: #ddd;
  color: black;
}


/* Links inside the navbar */

.c a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 60px;
  text-decoration: none;
  margin-right: 0px;
  background: #333;
  -o-transition: color 0.4s ease-out, background 0.4s ease-in;
  -ms-transition: color 0.4s ease-out, background 0.4s ease-in;
  -moz-transition: color 0.4s ease-out, background 0.4s ease-in;
  -webkit-transition: color 0.4s ease-out, background 0.4s;
  ease-in;
  transition: color 0.4s ease-out, background 0.4s ease-in;
}

.d a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin-left: 0px;
  background: #333;
  -o-transition: color 0.4s ease-out, background 0.4s ease-in;
  -ms-transition: color 0.4s ease-out, background 0.4s ease-in;
  -moz-transition: color 0.4s ease-out, background 0.4s ease-in;
  -webkit-transition: color 0.4s ease-out, background 0.4s;
  ease-in;
  transition: color 0.4s ease-out, background 0.4s ease-in;
}


/* Main content */

.main {
  margin-top: 60px;
  /* Add a top margin to avoid content overlay */
}

<div class="navbar">
  <div class="c">
    <a href="#home">TEST</a>
  </div>
  <div class="d">
    <a href="#shop">Shop</a>
    <a href="#philosophy">Philosophy</a>
  </div>
</div>

<div class="main">
  <img class="mySlides" src="C:\Users\XXX\Documents\HTML\Test\img\home_1.jpg">
  <img class="mySlides" src="C:\Users\XXX\Documents\HTML\Test\img\home_2.jpg">
  <div class="slogan">
    <a href="#wallpaper">TESTTEST.</a>
  </div>

  <script>
    var myIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      myIndex++;
      if (myIndex > x.length) {
        myIndex = 1
      }
      x[myIndex - 1].style.display = "block";
      setTimeout(carousel, 6000);
    }
  </script>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

Answer 1

 .main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-top: 60px;
   /* Add a top margin to avoid content overlay */
 }

这几乎就是你所说的，并使其成为柱状的。