如何在网格中的div (CSS)中居中(justify-content和align-items不起作用)

Question

我有一个grid布局的div，里面有几个div。我希望网格内的div为全高，并且我希望网格内div的内容垂直居中。我已经到处寻找解决方案了，但没有找到一个有效的。到目前为止，我已经尝试使用justify-content和align-items，但他们没有做我想要的。

这是我尝试过的:

.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
justify-content: center;
align-items: center;
}
.one {
flex: 1;
}
.two {
flex: 1;
justify-content: center;
align-items: center;
vertical-align: center;
}

<div class="wrapper">
<div class="card one">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
<div class="card two">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>

任何输入是非常感谢!

谢谢!:)

Answer 1

如果我没弄错的话，应该是这样的。就在"卡片"上。类:

显示:flex;对齐项目:中心;

在里面添加div将会把它放在中间。

.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
flex: 1;
display: flex;
align-items: center;
}

<div class="wrapper">
<div class="card">
<div class="inside">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
</div>
<div class="card">
<div class="inside">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>
</div>

Answer 2

像这样?它搞砸了你的h2的外观，但可以很容易地修复。你的说明说标题和文本垂直对齐我猜这是你想要的?另外，显示伸缩的默认方向是行，所以不需要指定。这只是一个让代码更简洁的提示。

.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.one {
flex: 1;
}
.two {
flex: 1;
color: red;
display: flex;
align-items: center;
}

<div class="wrapper">
<div class="card one">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
<div class="card two">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>

Answer 3

输入图片描述

*这个应该可以工作

.p-grid {
display: flex;
flex-wrap: wrap;
}
.p-align-center {
align-items: center;
}
.vertical-container {
margin: 0;
height: 200px;
background: #efefef;
border-radius: 4px;
}

<h3>Vertical Alignment - Center</h3>
<div class="p-grid p-align-center vertical-container">
<div class="p-col">
<div class="box">4</div>
</div>
</div>

Answer 4

希望这对你有帮助。你忘了添加display: flex;你的卡片，当你添加flex，你想让你的内容在一个列布局你必须添加flex-direction: column;(行为标准选项)

.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
justify-content: center;
align-items: start;
display: flex;
flex-direction: column;
}

<div class="wrapper">
<div class="card one">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
<div class="card two">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>