使用flexbox将中心对齐一行div下方的div

Question

现在的样子。

我希望välj div在其他div之下居中。

我正在使用flexbox。

我现在所做的是将所有div包装在一个容器中，然后添加：

display: flex;
align-items: center;
justify-content: center;

到容器

div行周围也有一个容器。使用值：

display: flex;   
flex-flow: row;
justify-content: center;
align-content: center;
align-items: center;

最后一个＆＃34;按钮＆＃34; div（välj）的值为align-self: center;。

我是否遗漏了某些东西，或者现在应该将其置于中心位置？

Answer 1

Flexbox中的align-*属性（align-items/content/self）定义了浏览器如何沿着容器的交叉轴在Flex项目之间和之间分配空间。

因此，在您的情况下，容器具有行方向，align-self: center将垂直居中，但如果其父级没有如果高度高于弹性项目，则无法直观地看到它。

根据您说价格项周围有一个行div ，按钮周围有一个行div ，您有两个主要选项可以使按钮居中：

1. 将容器更改为列方向，align-self: center将水平居中按钮。

2. 将align-self: center替换为margin: auto

Answer 2

以下仅适用于行的flexbox。

.item {
  width: 20%;
  height: 50px;
  background: blue;
  border: thin solid red;
}

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

.row:not(:last-child) {
  margin-bottom: 1em;
}

.container {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <button>Button</button>
  </div>
</div>

Answer 3

虽然@ Gerard的答案确实有效。在我的网站上，它不适合我。因为我从几年前编写的代码中获得了一堆继承的css。然而，这确实有效。

＆＃13;

＆＃13;

.sub-slider {
    width: 100%;
    display: flex; 
    flex-flow: column;
}
.slider {
  display: flex;   
  flex-flow: row;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.sub-slider-btn-wrp { 
  align-self: center;
}
.item {
  width: 20%;
  height: 50px;
  background: blue;
  border: thin solid red;
}

＆＃13;

<div class="sub-slider">
  <div class="slider">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="sub-slider-btn-wrp">
    <button>Button</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;