div内水平和垂直段落居中

Question

如何将div内的段落水平和垂直居中，我得出了这个结果

.Benefits {
  min-height: 20%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

<section class="Benefits">
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum n</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>

</section>

Answer 1

<section class="Benefits">
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum n</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>

</section>

BeaconParser().clear()

Answer 2

我已经在CSS中注意到了这里发生的情况：

我认为最好使用两种显示方式：flex。水平一，垂直一。

.Benefits {
	width: 100%;
	max-width: 1248px;
	margin: 0 auto; /* centers container */
	padding: 10px; /* this combined with the margin in the divs will make the margins appear consistent */
	box-sizing: border-box;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-direction: row; /* sort into rows */
	align-items: center;
	justify-content: space-between;
	text-align: center;
}

	.Benefits div {
		width: calc((100% / 3) - 20px); /* calculate width for maximum accuracy | minus margin */
		margin: 10px; /* space between boxes */
		padding: 20px; /* space inside boxes */
		box-sizing: border-box; /* calculates border and padding in width */
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: column; /* sort into columns */
		align-items: center;
		justify-content: center;
		flex-grow: 1; /* forces singular div that falls beneath to be full width */

		background-color: rgba(0,0,0,0.25);
	}
		@media screen and (min-width: 640px) and (max-width: 1023px) {
			.Benefits div {
				width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
			}
		}
		@media screen and (max-width: 639px) {
			.Benefits div {
				width: 100%; /* calculate width for maximum accuracy | minus margin */
			}
		}

		.Benefits div h1 {
			margin-bottom: 20px;
		}

<section class="Benefits">

	<div>
		<h1>Lorem ipsum </h1>

		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
	</div>
	<div>
		<h1>Lorem ipsum n</h1>

		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
	</div>
	<div>
		<h1>Lorem ipsum </h1>

		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
	</div>

</section>

Jason，请让我知道您是否需要进一步调整。