我想知道如何將div中的3個段落居中？ 有一個段落的每個div和一個包含所有3個div的主div。

div.first {
    font-family: 'Kanit', sans-serif;
    color: aliceblue;
    width: 30%;
    float: left;
    text-align: center;
    padding-top: 40px;
}

div.second {
   font-family: 'Kanit', sans-serif;
    color: aliceblue;
    width: 30%;
    float: left;
    text-align: center;
    padding-top: 40px;
  }

div.third {
    font-family: 'Kanit', sans-serif;
    color: aliceblue;
    width: 30%;
    float: right;
    text-align: center;
    padding-top: 40px;
}

我試過這個...

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}

...盡管我不知道這是什么意思。

我把第一個、第二個和第三個div放入容器div，并給出display:flex；用于將div中的3個段落居中的屬性。并且可以使用justify-content:center；用于水平居中。希望對你有用。

.container {
  display: flex;
  justify-content: center;
}

.first {
  font-family: "Kanit", sans-serif;
  color: #000;
  padding: 40px;
  text-align: justify;
}

.second {
  font-family: "Kanit", sans-serif;
  color: #000;
  padding: 40px;
  text-align: justify;
}

.third {
  font-family: "Kanit", sans-serif;
  color: #000;
  padding: 40px;
  text-align: justify;
}

<div class="container">
        <div class="first">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo rerum nostrum aliquam quidem quae modi
            culpa quis repudiandae est maiores nesciunt deleniti eius voluptatum vitae veritatis inventore, dolor
            quaerat reiciendis corrupti ex excepturi dicta hic debitis quisquam! Tempora repudiandae quidem doloremque
            consequuntur. Quos perspiciatis ratione reprehenderit iusto. Alias, at dolores!
        </div>
        <div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aliquam quia, iste
            explicabo inventore nam. Quisquam commodi vitae eaque odio similique exercitationem delectus modi! Quo
            placeat fuga neque consequatur optio necessitatibus pariatur minus recusandae, perspiciatis numquam porro
            temporibus laudantium similique officia cupiditate quasi sunt inventore magni minima omnis. Officia,
            laborum!</div>

        <div class="third">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium expedita blanditiis et iste, dolor sed
            excepturi vero deleniti recusandae magnam aliquid eveniet ut doloremque animi ipsam quae amet molestiae. Eum
            veritatis veniam fugit, exercitationem quia dolor. Officia, obcaecati minus porro laudantium ducimus amet
            delectus rerum error molestias a sunt harum!
        </div>
    </div>