如何中心绝对元素使用Flex？

Question

我主要的div这是position:relative;和儿童是绝对element.I要水平居中他们，但有一些奇怪的事情，我不明白。

我怎么能水平居中绝对元素使用Flex？任何想法与？

示例图像

body{
  background:tomato;
}
.block{
  position:relative;
  width:700px;
  background:white;
  padding:10px;
}
.block-item{
  width:60px;
  height:60px;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}

.block-item:nth-of-type(1){
  left:0;
  background:lightgreen;
}
.block-item:nth-of-type(2){
  left:5%;
  top:25px;
  background:lightblue;
}
.block-item:nth-of-type(3){
  left:10%;
  background:lightgray;
}

  <div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>


    </div>
  </div>

Answer 1

更新：您可以使用margin以及或position relative实现这一目标

body{
  background:tomato;
}
.block{
  position:relative;
  width:100%;
  background:white;
  padding:30px 10px 50px 10px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.block-item{
  width:60px;
  height:60px;
  position:relative;
}

.block-item:nth-of-type(1){
  background:lightgreen;
  left:0;
}
.block-item:nth-of-type(2){
    left: -2%;
    top: 20px;
    background: lightblue;
}
.block-item:nth-of-type(3){
  left: -5%;
  background:lightgray;
}

<div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>
    </div>
  </div>

Answer 2

你并不需要在这里绝对位置。你只需要调整一些余量来实现这个布局：

body {
  background: tomato;
}

.block {
  background: white;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-item {
  width: 60px;
  height: 60px;
}

.block-item:nth-of-type(1) {
  margin-right: -10px;
  background: lightgreen;
}

.block-item:nth-of-type(2) {
  margin-right: -10px;
  margin-top: 25px;
  background: lightblue;
}

.block-item:nth-of-type(3) {
  background: lightgray;
}

<div id="main">
  <div class="block">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
  </div>
</div>

Answer 3

使用position: relative，而不是绝对的，并添加到Flexbox的元素block。还可以调整使用左侧的像素而不是百分比 - 见下面的演示：

body {
  background: tomato;
}

.block {
  position: relative;
  width: 700px;
  background: white;
  padding: 10px;
  display: flex; /* Flexbox here */
  justify-content: center;
}

.block-item {
  width: 60px;
  height: 60px;
  /*position: absolute;*/
  position: relative;
  /*display: flex;
  align-items: center;
  justify-content: center;*/
}

.block-item:nth-of-type(1) {
  left: 0;
  background: lightgreen;
}

.block-item:nth-of-type(2) {
  left: -20px; /* CHANGED */
  top: 25px;
  background: lightblue;
}

.block-item:nth-of-type(3) {
  left: -50px; /* CHANGED */
  background: lightgray;
}

<div id="main">
  <div class="block">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
  </div>
</div>

Answer 4

body{
  background:tomato;
}
.block{
  position:relative;
  width:700px;
  background:white;
  padding:10px;
}
.block-item{
  left: 50%;
  transform: translateX(-50%);
  width:60px;
  height:60px;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}

.block-item:nth-of-type(1){
  background:lightgreen;
}
.block-item:nth-of-type(2){
  top:25px;
  background:lightblue;
}
.block-item:nth-of-type(3){
  background:lightgray;
}

  <div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>


    </div>
  </div>

Answer 5

Try this Fiddle

.block{
 position:relative;
 width:700px;
 background:white;
 padding:10px;
 display:flex;
 align-items:center;
 justify-content:center;  
 }

Answer 6

您可以更改CSS如下。

body{
    background:tomato;
}
.block{
    position:relative;
    width:100%;
    background:white;
    padding:10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.block-item{
    width:33%;
    height:60px;
    margin: 0 auto;
}

.block-item:nth-of-type(1){
    left:0;
    background:lightgreen;
}
.block-item:nth-of-type(2){
    left:5%;
    top:25px;
    background:lightblue;
}
.block-item:nth-of-type(3){
    left:10%;
    background:lightgray;
}

而且在HTML中没有变化

Answer 7

只是删除position:absolute和使用position:relative和调整左上角右和你的主要股利如下。我希望这个解决方案将是对你有帮助。

body {
    background: tomato;
}
.block {
    max-width: 700px;
    position: relative;
    padding: 10px;
    text-align: center;
    background: white;
}
.block-item {
    width: 60px;
    height: 60px;
    position: relative;
    display: inline-block;
    left: -15px;
    margin-bottom: 10px;
}
.block-item:nth-of-type(1) {
    left: 0;
    background: lightgreen;
}
.block-item:nth-of-type(2) {
    background: lightblue;
    top: 15px;
}
.block-item:nth-of-type(3) {
    background: lightgray;
    right: 30px;
    left: inherit;
}

<div id="main">
    <div class="block">
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
    </div>
</div>