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

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

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

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

абсолютный с гибким --> почему? какова цель?

— 07.02.2019 10:12

правильно центрировать мой дочерний элемент

— 07.02.2019 10:25

Flex не коррелирует с абсолютным позиционированием. Когда вы устанавливаете absolute: position, контекст стека изменяется, и гибкий контейнер больше не влияет на него.

— 07.02.2019 10:27

html css flexbox css-position

07.02.2019 10:09

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 262

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

но мне нужно установить левый и верхний мои дочерние элементы

— 07.02.2019 10:20

не могли бы вы показать каркас или что-то в этом роде, как это должно выглядеть?

— 07.02.2019 10:22

07.02.2019 10:17

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>

07.02.2019 10:24

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

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

07.02.2019 10:24

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

07.02.2019 10:30

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

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>

07.02.2019 10:58

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

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>

07.02.2019 11:02

Используйте position: relative вместо абсолютный и добавьте флексбокс в элемент 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>

07.02.2019 11:12

Другие вопросы по теме

Сообщения функции копирования Javascript в буфер обмена не работают, если используются дважды

Как сделать сортировку данных в коде HTML/D3

Тег объекта, отображающий HTML-документ. Как я могу применить CSS к этому документу?

Ajax-поиск в модальном режиме

Почему значение входных элементов не меняется?

Всплывающее окно не придерживается сохраненного текста

Фильтрация класса jQuery и анимация задержки/блокировки преобразования css в разделе ниже

Элемент прокрутки внутри элемента заполнения высоты

Должны ли мы избегать использования ID в качестве селектора CSS

Как реплицировать элементы HTML с помощью Loop в javascript

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

Ответы 7

Другие вопросы по теме

Похожие вопросы