html - 在网格元素内垂直对齐中心和底部

This question already has answers here:

Centering in CSS Grid
                                
                                    （7个答案）
                                
                        
                                2年前关闭。
            
                    
我有两个元素的网格-childa和childb。

childb有其自己的inside子级，我不能center vertically放置bottom vertically。

有什么帮助吗？

.parent {
  display: grid;
  height: 170px;
  background: black;
  grid-template-columns: 50% 50%;
  grid-gap: 10px;
}

.child {
  background: gold;
  height: 150px;
  margin-top: 10px;
}

.inside {
  width: 80%;
  background: red;
  margin: 0 auto;
}

<div class='parent'>
  <div class='child childa'>lorem</div>
  <div class='child childb'>
    <div class='inside'>
      sdfsdfsdfd<br> adfdsfsdds
      <br>
    </div>
  </div>
</div>

最佳答案

如果您不寻求仅基于网格的解决方案，那么我相信flexbox功能可以帮助您实现所需的目标。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/是此的重要来源。

.childb {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

编辑：您可以通过查看上面的链接来根据需要编辑值（例如中心）。