在其父容器边框内居中子元素

【问题标题】：Center child element within it's parent container border在其父容器边框内居中子元素
【发布时间】：2022-01-26 17:16:16
【问题描述】：

基本上，我正在尝试使用 HTML 和 CSS 将大量项目垂直居中于其父边框上，我希望它看起来像这样：这是我为解释它所做的测试：

基本上，我想让它们以绿色元素的对齐方式居中，到目前为止，我得到的是蓝色元素的定位方式。

最简单的方法是什么？

【问题讨论】：

标签： html css

【解决方案1】：

你应该给子元素负边距值。

<div class="parent">
  <div class="child-wrapper">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

<style>
.parent{
  background: #000;
  border: 1px solid #dfdfdf;
  margin: 60px;
  display:flex;
  align-items: center;
  justify-content: flex-end;
}
.child-wrapper{
margin-left: auto;
margin-right: -30px;
width: 60px;
}

.child{
  width: 60px;
  height: 60px;
  background: green;
  margin-top:15px;
  margin-bottom:15px;
}
</style>

【讨论】：