Как центрировать абсолютный элемент с помощью flex?

Question

У меня есть основной div, который является position:relative;, и дочерние элементы, которые являются абсолютным элементом. Я хочу центрировать их по горизонтали, но происходит что-то странное, я не понимаю.

Как я могу центрироватьсяабсолютный элемент по горизонтали с 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

Здесь вам не нужна абсолютная позиция.Вам просто нужно отрегулировать некоторые поля для достижения этого макета:

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 2

Используйте position: relative вместо absolute и добавьте 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 3

Просто удалите 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>

Answer 4

Вы можете изменить 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 5

Попробуйте эту скрипку

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

Answer 6

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 7

Обновление: вы можете достичь этого, используя 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>